diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 8936bf3..34d3472 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/packages/apps/client/package.json b/packages/apps/client/package.json index 1f1dd10..0296aa3 100644 --- a/packages/apps/client/package.json +++ b/packages/apps/client/package.json @@ -41,6 +41,7 @@ "eventemitter3": "^5.0.1", "mdast-util-directive": "^3.0.0", "mdast-util-from-markdown": "^2.0.0", + "mdast-util-to-markdown": "^2.1.0", "micromark-extension-directive": "^3.0.0", "mobx": "^6.10.2", "mobx-react-lite": "^4.0.5", diff --git a/packages/apps/client/src/ScriptEditor/Editor.tsx b/packages/apps/client/src/ScriptEditor/Editor.tsx index 04f267d..b00d52d 100644 --- a/packages/apps/client/src/ScriptEditor/Editor.tsx +++ b/packages/apps/client/src/ScriptEditor/Editor.tsx @@ -60,8 +60,10 @@ export function Editor({ lineId: randomId(), }, [ - schema.node(schema.nodes.lineTitle, undefined, schema.text('Line title')), - schema.node(schema.nodes.paragraph, undefined, schema.text('Script...')), + schema.node(schema.nodes.lineTitle, undefined, [schema.text('Line title')]), + ...fromMarkdown( + 'Raz _dwa **trzy**_. :reverse[Cztery.]\n\nPięć _sześć_ siedem.\n\n\n\n\n\nSome more :reverse[Markdown **Here**]' + ), ] ), schema.node( diff --git a/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts b/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts index ef133f8..9187a78 100644 --- a/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts +++ b/packages/apps/client/src/ScriptEditor/plugins/updateModel.ts @@ -20,7 +20,7 @@ export function updateModel(onChange?: (lineId: UILineId, contents: SomeContents if (!parent) return if (parent.type.name !== 'line') return - if (onChange) onChange(lineId, parent.toString()) + if (onChange) onChange(lineId, parent) }) }) }) diff --git a/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css b/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css index 61ab30f..4f9e1e9 100644 --- a/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css +++ b/packages/apps/client/src/components/SplitPanel/SplitPanel.module.css @@ -13,12 +13,15 @@ .Divider { grid-column: Divider; - --test: 1; cursor: ew-resize; } -.Divider:hover, .DividerActive { + composes: Divider; + background-color: var(--bs-primary); +} + +.Divider:hover { background-color: var(--bs-primary); } diff --git a/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx b/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx index 16ef111..b54a96a 100644 --- a/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx +++ b/packages/apps/client/src/components/SplitPanel/SplitPanel.tsx @@ -19,6 +19,7 @@ export function SplitPanel({ const beginCoords = useRef<{ x: number; y: number } | null>(null) const initialPos = useRef(position ?? 0.5) const container = useRef(null) + const divider = useRef(null) const contRect = useRef(null) const defaultedPosition = position ?? 0.5 @@ -83,10 +84,28 @@ export function SplitPanel({ initialPos.current = defaultedPosition }, [isResizing, defaultedPosition]) + useEffect(() => { + if (isResizing) { + if (!divider.current) return + const style = window.getComputedStyle(divider.current) + document.body.style.cursor = style.cursor + } else { + document.body.style.cursor = '' + } + + return () => { + document.body.style.cursor = '' + } + }, [isResizing]) + return (
{childrenBegin}
-
+
{childrenEnd}
) diff --git a/packages/apps/client/src/lib/prosemirrorDoc.ts b/packages/apps/client/src/lib/prosemirrorDoc.ts index 5434175..d98a31e 100644 --- a/packages/apps/client/src/lib/prosemirrorDoc.ts +++ b/packages/apps/client/src/lib/prosemirrorDoc.ts @@ -1,25 +1,78 @@ -import { fromMarkdown as mdastFromMarkdown } from 'mdast-util-from-markdown' -import type { Node, Parent } from 'mdast' +import { fromMarkdown as mdAstFromMarkdown } from 'mdast-util-from-markdown' +import { toMarkdown as mdAstToMarkdown } from 'mdast-util-to-markdown' +import type { Node as MdAstNode, Parent as MdAstParent, Literal as MdAstLiteral } from 'mdast' +import { Node as ProsemirrorNode } from 'prosemirror-model' import { directive } from 'micromark-extension-directive' -import { directiveFromMarkdown } from 'mdast-util-directive' +import { schema } from '../ScriptEditor/scriptSchema' +import { directiveFromMarkdown, directiveToMarkdown } from 'mdast-util-directive' -export function fromMarkdown(text: string): void { - const ast = mdastFromMarkdown(text, 'utf-8', { +export function fromMarkdown(text: string): ProsemirrorNode[] { + const ast = mdAstFromMarkdown(text, 'utf-8', { extensions: [directive()], mdastExtensions: [directiveFromMarkdown()], }) - traverseNodes(ast.children) + return traverseMdAstNodes(ast.children) } -function traverseNodes(nodes: Node[]) { +export function toMarkdown(doc: ProsemirrorNode[]): string { + return mdAstToMarkdown( + { + type: 'root', + children: [], + }, + { + extensions: [directiveToMarkdown()], + } + ) +} + +function mdastToEditorSchemaNode(node: MdAstNode, children?: ProsemirrorNode[]): ProsemirrorNode[] { + console.log(node) + if (node.type === 'paragraph') { + return [schema.node(schema.nodes.paragraph, undefined, children)] + } else if (node.type === 'text' && isLiteral(node)) { + return [schema.text(node.value)] + } else if (node.type === 'strong' && children) { + return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.bold)])) + } else if (node.type === 'emphasis' && children) { + return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.italic)])) + } else if (isTextDirective(node) && node.name === 'reverse' && children) { + return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.reverse)])) + } else { + return [schema.text('[UNKNOWN]')] + } +} + +function traverseMdAstNodes(nodes: MdAstNode[]): ProsemirrorNode[] { + const result: ProsemirrorNode[] = [] for (const childNode of nodes) { - console.dir(childNode) - if (isParent(childNode)) traverseNodes(childNode.children) + let children: ProsemirrorNode[] = [] + if (isParent(childNode)) { + children = traverseMdAstNodes(childNode.children) + } + result.push(...mdastToEditorSchemaNode(childNode, children)) } + + return result } -function isParent(node: Node): node is Parent { +function isParent(node: MdAstNode): node is MdAstParent { if ('children' in node && Array.isArray(node.children)) return true return false } + +function isLiteral(node: MdAstNode): node is MdAstLiteral { + if ('value' in node) return true + return false +} + +function isTextDirective(node: MdAstNode): node is MdAstTextDirective { + if (node.type === 'textDirective' && 'name' in node) return true + return false +} + +interface MdAstTextDirective extends MdAstNode { + name: string + attributes: Record +} diff --git a/yarn.lock b/yarn.lock index 8ff631d..ce6c27e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1955,6 +1955,7 @@ __metadata: eventemitter3: "npm:^5.0.1" mdast-util-directive: "npm:^3.0.0" mdast-util-from-markdown: "npm:^2.0.0" + mdast-util-to-markdown: "npm:^2.1.0" micromark-extension-directive: "npm:^3.0.0" micromark-util-types: "npm:^2.0.0" mobx: "npm:^6.10.2" @@ -8153,7 +8154,7 @@ __metadata: languageName: node linkType: hard -"mdast-util-to-markdown@npm:^2.0.0": +"mdast-util-to-markdown@npm:^2.0.0, mdast-util-to-markdown@npm:^2.1.0": version: 2.1.0 resolution: "mdast-util-to-markdown@npm:2.1.0" dependencies: