mirror of
https://github.com/Shadowfita/docmost.git
synced 2025-11-13 00:02:30 +10:00
Compare commits
1 Commits
Table-of-C
...
15eb997c92
| Author | SHA1 | Date | |
|---|---|---|---|
| 15eb997c92 |
47
.github/workflows/main.yml
vendored
Normal file
47
.github/workflows/main.yml
vendored
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
name: Sync Merged-Downstream with Docmost Upstream Main
|
||||||
|
|
||||||
|
on:
|
||||||
|
schedule:
|
||||||
|
- cron: '0 0 * * *' # Run daily at midnight UTC
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
sync:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout repo
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
with:
|
||||||
|
fetch-depth: 0 # Fetch all history to detect changes properly
|
||||||
|
|
||||||
|
- name: Set up git
|
||||||
|
run: |
|
||||||
|
git config --global user.name "Shadowfita"
|
||||||
|
git config --global user.email "www.ryan.palmer@hotmail.com"
|
||||||
|
|
||||||
|
- name: Fetch upstream
|
||||||
|
run: |
|
||||||
|
git remote add upstream https://github.com/docmost/docmost.git
|
||||||
|
git fetch upstream
|
||||||
|
|
||||||
|
- name: Check if upstream has changes
|
||||||
|
id: check_changes
|
||||||
|
run: |
|
||||||
|
UPSTREAM_DIFF=$(git diff --name-only upstream/main)
|
||||||
|
if [ -z "$UPSTREAM_DIFF" ]; then
|
||||||
|
echo "No changes in upstream main branch."
|
||||||
|
echo "::set-output name=changes::false"
|
||||||
|
else
|
||||||
|
echo "Changes detected in upstream main branch."
|
||||||
|
echo "::set-output name=changes::true"
|
||||||
|
fi
|
||||||
|
|
||||||
|
- name: Merge upstream/main into Merged-Downstream
|
||||||
|
if: steps.check_changes.outputs.changes == 'true'
|
||||||
|
run: |
|
||||||
|
git checkout Merged-Downstream
|
||||||
|
git merge upstream/main
|
||||||
|
|
||||||
|
- name: Push changes to Merged-Downstream
|
||||||
|
if: steps.check_changes.outputs.changes == 'true'
|
||||||
|
run: |
|
||||||
|
git push origin Merged-Downstream
|
||||||
@ -9,7 +9,6 @@ import {
|
|||||||
IconInfoCircle,
|
IconInfoCircle,
|
||||||
IconList,
|
IconList,
|
||||||
IconListNumbers,
|
IconListNumbers,
|
||||||
IconListTree,
|
|
||||||
IconMath,
|
IconMath,
|
||||||
IconMathFunction,
|
IconMathFunction,
|
||||||
IconMovie,
|
IconMovie,
|
||||||
@ -97,20 +96,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
|
|||||||
.run();
|
.run();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "Table of Contents",
|
|
||||||
description: "Create a table of contents.",
|
|
||||||
searchTerms: ["table", "contents", "list"],
|
|
||||||
icon: IconListTree,
|
|
||||||
command: ({ editor, range }: CommandProps) => {
|
|
||||||
editor
|
|
||||||
.chain()
|
|
||||||
.focus()
|
|
||||||
.deleteRange(range)
|
|
||||||
.toggleTableOfContents()
|
|
||||||
.run();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "Bullet list",
|
title: "Bullet list",
|
||||||
description: "Create a simple bullet list.",
|
description: "Create a simple bullet list.",
|
||||||
|
|||||||
@ -1,124 +0,0 @@
|
|||||||
import { BubbleMenu as BaseBubbleMenu, findParentNode, posToDOMRect } from "@tiptap/react";
|
|
||||||
import React, { useCallback } from "react";
|
|
||||||
import { sticky } from "tippy.js";
|
|
||||||
import { Node as PMNode } from "prosemirror-model";
|
|
||||||
import { EditorMenuProps, ShouldShowProps } from "@/features/editor/components/table/types/types.ts";
|
|
||||||
import {
|
|
||||||
ActionIcon,
|
|
||||||
DividerVariant,
|
|
||||||
Group,
|
|
||||||
SegmentedControl,
|
|
||||||
Select,
|
|
||||||
Tooltip,
|
|
||||||
Text,
|
|
||||||
Checkbox,
|
|
||||||
Card,
|
|
||||||
Fieldset,
|
|
||||||
} from "@mantine/core";
|
|
||||||
import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight } from "@tabler/icons-react";
|
|
||||||
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
|
|
||||||
|
|
||||||
export function TableOfContentsMenu({ editor }: EditorMenuProps) {
|
|
||||||
const shouldShow = useCallback(
|
|
||||||
({ state }: ShouldShowProps) => {
|
|
||||||
if (!state) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return editor.isActive("tableOfContents");
|
|
||||||
},
|
|
||||||
[editor]
|
|
||||||
);
|
|
||||||
|
|
||||||
const getReferenceClientRect = useCallback(() => {
|
|
||||||
const { selection } = editor.state;
|
|
||||||
const predicate = (node: PMNode) => node.type.name === "tableOfContents";
|
|
||||||
const parent = findParentNode(predicate)(selection);
|
|
||||||
|
|
||||||
if (parent) {
|
|
||||||
const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
|
|
||||||
return dom.getBoundingClientRect();
|
|
||||||
}
|
|
||||||
|
|
||||||
return posToDOMRect(editor.view, selection.from, selection.to);
|
|
||||||
}, [editor]);
|
|
||||||
|
|
||||||
const setDividerType = useCallback(
|
|
||||||
(type: DividerVariant) => {
|
|
||||||
editor.chain().focus(undefined, { scrollIntoView: false }).setDividerType(type).run();
|
|
||||||
},
|
|
||||||
[editor]
|
|
||||||
);
|
|
||||||
|
|
||||||
const setTableType = useCallback(
|
|
||||||
(type: "Contents" | "Child Pages") => {
|
|
||||||
editor.chain().focus(undefined, { scrollIntoView: false }).setTableType(type).run();
|
|
||||||
},
|
|
||||||
[editor]
|
|
||||||
);
|
|
||||||
|
|
||||||
const setPageIcons = useCallback(
|
|
||||||
(icons: boolean) => {
|
|
||||||
editor.chain().focus(undefined, { scrollIntoView: false }).setPageIcons(icons).run();
|
|
||||||
},
|
|
||||||
[editor]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseBubbleMenu
|
|
||||||
editor={editor}
|
|
||||||
pluginKey={`tableOfContents-menu}`}
|
|
||||||
updateDelay={0}
|
|
||||||
tippyOptions={{
|
|
||||||
getReferenceClientRect,
|
|
||||||
offset: [0, 8],
|
|
||||||
zIndex: 99,
|
|
||||||
popperOptions: {
|
|
||||||
modifiers: [{ name: "flip", enabled: false }],
|
|
||||||
},
|
|
||||||
plugins: [sticky],
|
|
||||||
sticky: "popper",
|
|
||||||
maxWidth: 500,
|
|
||||||
}}
|
|
||||||
shouldShow={shouldShow}
|
|
||||||
>
|
|
||||||
<Fieldset variant="filled" p="xs">
|
|
||||||
<Group gap="xs">
|
|
||||||
<Tooltip position="top" label="Divider type">
|
|
||||||
<Select
|
|
||||||
w={100}
|
|
||||||
value={editor.getAttributes("tableOfContents").dividerType}
|
|
||||||
data={[
|
|
||||||
{ value: "solid", label: "Solid" },
|
|
||||||
{ value: "dashed", label: "Dashed" },
|
|
||||||
{ value: "dotted", label: "Dotted" },
|
|
||||||
{ value: "none", label: "None" },
|
|
||||||
]}
|
|
||||||
onChange={(_value, option) => setDividerType(_value as DividerVariant)}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip position="top" label="Table type">
|
|
||||||
<SegmentedControl
|
|
||||||
value={editor.getAttributes("tableOfContents").tableType}
|
|
||||||
data={["Contents", "Child Pages"]}
|
|
||||||
onChange={(value: "Contents" | "Child Pages") => setTableType(value)}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
{editor.getAttributes("tableOfContents").tableType == "Child Pages" && (
|
|
||||||
<Tooltip position="top" label="Show page icons">
|
|
||||||
<Group gap="xs">
|
|
||||||
<Text size="sm">Page Icons</Text>
|
|
||||||
<Checkbox
|
|
||||||
checked={editor.getAttributes("tableOfContents").icons}
|
|
||||||
onChange={(event) => setPageIcons(event.currentTarget.checked)}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
</Fieldset>
|
|
||||||
</BaseBubbleMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TableOfContentsMenu;
|
|
||||||
@ -1,199 +0,0 @@
|
|||||||
import { JSONContent, NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
|
|
||||||
import {
|
|
||||||
IconAlertTriangleFilled,
|
|
||||||
IconCircleCheckFilled,
|
|
||||||
IconCircleXFilled,
|
|
||||||
IconInfoCircleFilled,
|
|
||||||
} from "@tabler/icons-react";
|
|
||||||
import { Alert, Divider, Group, Stack, Title, UnstyledButton, Text, DividerVariant } from "@mantine/core";
|
|
||||||
import { CalloutType } from "@docmost/editor-ext";
|
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
|
||||||
import { TextSelection } from "@tiptap/pm/state";
|
|
||||||
import classes from "./table-of-contents.module.css";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { useGetRootSidebarPagesQuery, usePageQuery } from "@/features/page/queries/page-query";
|
|
||||||
import { IPage, SidebarPagesParams } from "@/features/page/types/page.types";
|
|
||||||
import { queryClient } from "@/main";
|
|
||||||
import { getSidebarPages } from "@/features/page/services/page-service";
|
|
||||||
import { useToggle } from "@mantine/hooks";
|
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
|
||||||
import { buildPageUrl } from "@/features/page/page.utils";
|
|
||||||
import { string } from "zod";
|
|
||||||
|
|
||||||
export default function TableOfContentsView(props: NodeViewProps) {
|
|
||||||
const { node, editor, selected } = props;
|
|
||||||
|
|
||||||
const { dividerType, tableType, icons } = node.attrs as {
|
|
||||||
dividerType: DividerVariant & "none";
|
|
||||||
tableType: "Contents" | "Child Pages";
|
|
||||||
icons: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const pageId = editor.storage?.pageId;
|
|
||||||
|
|
||||||
const { data: page } = usePageQuery({
|
|
||||||
pageId: pageId,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { pageSlug, spaceSlug } = useParams();
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const [childPages, setChildPages] = useState<JSX.Element[]>([]);
|
|
||||||
const [headings, setHeadings] = useState<JSX.Element[]>([]);
|
|
||||||
|
|
||||||
const fetchChildren = async (params: SidebarPagesParams) => {
|
|
||||||
return await queryClient.fetchQuery({
|
|
||||||
queryKey: ["toc-child-pages", params],
|
|
||||||
queryFn: () => getSidebarPages(params),
|
|
||||||
staleTime: 10 * 60 * 1000,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Max depth to prevent infinite recursion errors
|
|
||||||
const MAX_RECURSION_DEPTH = 10;
|
|
||||||
|
|
||||||
const fetchAllChildren = async (
|
|
||||||
currentPage: IPage,
|
|
||||||
pages: (IPage & { depth: number })[],
|
|
||||||
depth: number = 0
|
|
||||||
): Promise<void> => {
|
|
||||||
// Prevent infinite recursion
|
|
||||||
if (depth > MAX_RECURSION_DEPTH) {
|
|
||||||
console.warn("Max recursion depth reached");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const params: SidebarPagesParams = {
|
|
||||||
pageId: currentPage.id,
|
|
||||||
spaceId: currentPage.spaceId,
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = await fetchChildren(params);
|
|
||||||
const children = result.items;
|
|
||||||
|
|
||||||
// Store the children in the relationships map
|
|
||||||
for (let child of children) pages.push({ ...child, depth });
|
|
||||||
|
|
||||||
// Use requestIdleCallback to allow the browser to perform other tasks
|
|
||||||
for (const child of children) {
|
|
||||||
if (child.hasChildren) {
|
|
||||||
await new Promise((resolve) =>
|
|
||||||
requestIdleCallback(() => {
|
|
||||||
fetchAllChildren(child, pages, depth + 1).then(resolve);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!page) return;
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
if (tableType == "Child Pages") {
|
|
||||||
// Initialize the child pagse array
|
|
||||||
const pages: (IPage & { depth: number })[] = [];
|
|
||||||
|
|
||||||
// Fetch all children recursively
|
|
||||||
await fetchAllChildren(page, pages);
|
|
||||||
|
|
||||||
const tocChildPages: JSX.Element[] = pages.map((value, index) => (
|
|
||||||
<UnstyledButton
|
|
||||||
key={`toc-${index}`}
|
|
||||||
className={classes.heading}
|
|
||||||
style={{
|
|
||||||
marginLeft: `calc(${value.depth} * var(--mantine-spacing-md))`,
|
|
||||||
}}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
if (e.button != 0) return;
|
|
||||||
|
|
||||||
const pageSlug = buildPageUrl(spaceSlug, value.slugId, value.title);
|
|
||||||
|
|
||||||
// opted to not use "replace" so that browser back button workers properly
|
|
||||||
navigate(pageSlug);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Group>
|
|
||||||
<Text m={6}>
|
|
||||||
{icons ? value.icon : ""} {value.title}
|
|
||||||
</Text>
|
|
||||||
{dividerType != "none" && <Divider className={classes.divider} variant={dividerType} />}
|
|
||||||
</Group>
|
|
||||||
</UnstyledButton>
|
|
||||||
));
|
|
||||||
|
|
||||||
setChildPages(tocChildPages);
|
|
||||||
} else {
|
|
||||||
const contentHeadings = editor.getJSON().content?.filter((c) => c.type == "heading");
|
|
||||||
|
|
||||||
const tocHeadings: JSX.Element[] = contentHeadings.map((value, index) => (
|
|
||||||
<UnstyledButton
|
|
||||||
key={`toc-${index}`}
|
|
||||||
className={classes.heading}
|
|
||||||
style={{
|
|
||||||
marginLeft: `calc(${value.attrs?.level - 1} * var(--mantine-spacing-md))`,
|
|
||||||
}}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
if (e.button != 0) return;
|
|
||||||
|
|
||||||
if (editor) {
|
|
||||||
const headings = editor.view.dom.querySelectorAll("h1, h2, h3, h4, h5, h6");
|
|
||||||
const clickedHeading = headings[index];
|
|
||||||
|
|
||||||
// find selected heading position in DOM relative to editors view
|
|
||||||
const pos = editor.view.posAtDOM(clickedHeading, 0);
|
|
||||||
|
|
||||||
// start new state transaction on editors view state
|
|
||||||
const tr = editor.view.state.tr;
|
|
||||||
// move editor cursor to heading
|
|
||||||
tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
|
|
||||||
editor.view.dispatch(tr);
|
|
||||||
editor.view.focus();
|
|
||||||
|
|
||||||
window.scrollTo({
|
|
||||||
top:
|
|
||||||
clickedHeading.getBoundingClientRect().top -
|
|
||||||
// subtract half of elements height to avoid viewport clipping
|
|
||||||
clickedHeading.getBoundingClientRect().height / 2 -
|
|
||||||
// substract headers height so that heading is visible after scroll.
|
|
||||||
// getComputedStyles is not evaluating "--app-shell-header-height" so have hardcoded pixels.
|
|
||||||
45 * 2 +
|
|
||||||
window.scrollY,
|
|
||||||
behavior: "smooth",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Group>
|
|
||||||
<Text m={6}>{value.content?.at(0).text}</Text>
|
|
||||||
{dividerType != "none" && <Divider className={classes.divider} variant={dividerType} />}
|
|
||||||
</Group>
|
|
||||||
</UnstyledButton>
|
|
||||||
));
|
|
||||||
|
|
||||||
setHeadings(tocHeadings);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}, [page == undefined, dividerType, tableType, icons]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NodeViewWrapper>
|
|
||||||
<NodeViewContent />
|
|
||||||
<Stack
|
|
||||||
gap={0}
|
|
||||||
className={clsx(selected ? "ProseMirror-selectednode" : "")}
|
|
||||||
contentEditable={false}
|
|
||||||
onContextMenu={(e) => e.preventDefault()}
|
|
||||||
>
|
|
||||||
{tableType == "Contents" && headings}
|
|
||||||
|
|
||||||
{tableType == "Child Pages" && childPages}
|
|
||||||
</Stack>
|
|
||||||
</NodeViewWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
.divider {
|
|
||||||
flex: 1 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
:hover {
|
|
||||||
background-color: var(--mantine-color-default-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -35,7 +35,6 @@ import {
|
|||||||
CustomCodeBlock,
|
CustomCodeBlock,
|
||||||
Drawio,
|
Drawio,
|
||||||
Excalidraw,
|
Excalidraw,
|
||||||
TableofContents,
|
|
||||||
} from "@docmost/editor-ext";
|
} from "@docmost/editor-ext";
|
||||||
import {
|
import {
|
||||||
randomElement,
|
randomElement,
|
||||||
@ -55,7 +54,6 @@ import CodeBlockView from "@/features/editor/components/code-block/code-block-vi
|
|||||||
import DrawioView from "../components/drawio/drawio-view";
|
import DrawioView from "../components/drawio/drawio-view";
|
||||||
import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
|
import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
|
||||||
import plaintext from "highlight.js/lib/languages/plaintext";
|
import plaintext from "highlight.js/lib/languages/plaintext";
|
||||||
import TableOfContentsView from "../components/table-of-contents/table-of-contents-view";
|
|
||||||
|
|
||||||
const lowlight = createLowlight(common);
|
const lowlight = createLowlight(common);
|
||||||
lowlight.register("mermaid", plaintext);
|
lowlight.register("mermaid", plaintext);
|
||||||
@ -164,9 +162,6 @@ export const mainExtensions = [
|
|||||||
Excalidraw.configure({
|
Excalidraw.configure({
|
||||||
view: ExcalidrawView,
|
view: ExcalidrawView,
|
||||||
}),
|
}),
|
||||||
TableofContents.configure({
|
|
||||||
view: TableOfContentsView
|
|
||||||
})
|
|
||||||
] as any;
|
] as any;
|
||||||
|
|
||||||
type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
|
type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
|
||||||
|
|||||||
@ -39,7 +39,6 @@ import {
|
|||||||
import LinkMenu from "@/features/editor/components/link/link-menu.tsx";
|
import LinkMenu from "@/features/editor/components/link/link-menu.tsx";
|
||||||
import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
|
import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
|
||||||
import DrawioMenu from "./components/drawio/drawio-menu";
|
import DrawioMenu from "./components/drawio/drawio-menu";
|
||||||
import TableOfContentsMenu from "./components/table-of-contents/table-of-contents-menu";
|
|
||||||
|
|
||||||
interface PageEditorProps {
|
interface PageEditorProps {
|
||||||
pageId: string;
|
pageId: string;
|
||||||
@ -176,7 +175,6 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
|
|||||||
<CalloutMenu editor={editor} />
|
<CalloutMenu editor={editor} />
|
||||||
<ExcalidrawMenu editor={editor} />
|
<ExcalidrawMenu editor={editor} />
|
||||||
<DrawioMenu editor={editor} />
|
<DrawioMenu editor={editor} />
|
||||||
<TableOfContentsMenu editor={editor} />
|
|
||||||
<LinkMenu editor={editor} appendTo={menuContainerRef} />
|
<LinkMenu editor={editor} appendTo={menuContainerRef} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -14,4 +14,4 @@ export * from "./lib/attachment";
|
|||||||
export * from "./lib/custom-code-block"
|
export * from "./lib/custom-code-block"
|
||||||
export * from "./lib/drawio";
|
export * from "./lib/drawio";
|
||||||
export * from "./lib/excalidraw";
|
export * from "./lib/excalidraw";
|
||||||
export * from "./lib/table-of-contents";
|
|
||||||
|
|||||||
@ -1,115 +0,0 @@
|
|||||||
import { Node, findChildren, findParentNode, mergeAttributes, wrappingInputRule } from "@tiptap/core";
|
|
||||||
import { icon, setAttributes } from "./utils";
|
|
||||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
|
||||||
|
|
||||||
declare module "@tiptap/core" {
|
|
||||||
interface Commands<ReturnType> {
|
|
||||||
tableOfContents: {
|
|
||||||
setTableOfContents: () => ReturnType;
|
|
||||||
unsetTableOfContents: () => ReturnType;
|
|
||||||
toggleTableOfContents: () => ReturnType;
|
|
||||||
setDividerType: (type: "solid" | "dashed" | "dotted" | "none") => ReturnType;
|
|
||||||
setTableType: (type: "Contents" | "Child Pages") => ReturnType;
|
|
||||||
setPageIcons: (icons: boolean) => ReturnType;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TableofContentsOptions {
|
|
||||||
HTMLAttributes: Record<string, any>;
|
|
||||||
view: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const TableofContents = Node.create<TableofContentsOptions>({
|
|
||||||
name: "tableOfContents",
|
|
||||||
|
|
||||||
content: "block+",
|
|
||||||
inline: false,
|
|
||||||
group: "block",
|
|
||||||
isolating: true,
|
|
||||||
atom: true,
|
|
||||||
defining: true,
|
|
||||||
|
|
||||||
addOptions() {
|
|
||||||
return {
|
|
||||||
HTMLAttributes: {},
|
|
||||||
view: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
parseHTML() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
tag: `div[data-type="${this.name}"]`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
renderHTML({ HTMLAttributes }) {
|
|
||||||
return ["div", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
|
|
||||||
},
|
|
||||||
|
|
||||||
addAttributes() {
|
|
||||||
return {
|
|
||||||
dividerType: {
|
|
||||||
default: "solid",
|
|
||||||
parseHTML: (element) => element.getAttribute("data-divider-type"),
|
|
||||||
renderHTML: (attributes) => ({
|
|
||||||
"data-divider-type": attributes.dividerType,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
tableType: {
|
|
||||||
default: "Contents",
|
|
||||||
parseHTML: (element) => element.getAttribute("data-table-type"),
|
|
||||||
renderHTML: (attributes) => ({
|
|
||||||
"data-table-type": attributes.tableType,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
icons: {
|
|
||||||
default: true,
|
|
||||||
parseHTML: (element) => element.getAttribute("data-page-icons"),
|
|
||||||
renderHTML: (attributes) => ({
|
|
||||||
"data-page-icons": attributes.tableType,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
addNodeView() {
|
|
||||||
return ReactNodeViewRenderer(this.options.view);
|
|
||||||
},
|
|
||||||
|
|
||||||
addCommands() {
|
|
||||||
return {
|
|
||||||
setTableOfContents:
|
|
||||||
() =>
|
|
||||||
({ commands }) =>
|
|
||||||
commands.setNode(this.name),
|
|
||||||
|
|
||||||
unsetTableOfContents:
|
|
||||||
() =>
|
|
||||||
({ commands }) =>
|
|
||||||
commands.lift(this.name),
|
|
||||||
|
|
||||||
toggleTableOfContents:
|
|
||||||
() =>
|
|
||||||
({ commands }) =>
|
|
||||||
commands.toggleWrap(this.name),
|
|
||||||
|
|
||||||
setDividerType:
|
|
||||||
(type) =>
|
|
||||||
({ commands }) =>
|
|
||||||
commands.updateAttributes("tableOfContents", { dividerType: type }),
|
|
||||||
|
|
||||||
setTableType:
|
|
||||||
(type) =>
|
|
||||||
({ commands }) =>
|
|
||||||
commands.updateAttributes("tableOfContents", { tableType: type }),
|
|
||||||
|
|
||||||
setPageIcons:
|
|
||||||
(icons) =>
|
|
||||||
({ commands }) =>
|
|
||||||
commands.updateAttributes("tableOfContents", { icons: icons }),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user