@moldable-ai/editor 0.1.7 → 0.1.9

package/dist/lib/lexical/media-plugin.js

@@ -0,0 +1,139 @@
+'use client';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createParagraphNode, $createTextNode, $insertNodes, COMMAND_PRIORITY_HIGH, DROP_COMMAND, PASTE_COMMAND, } from 'lexical';
+import { useEffect } from 'react';
+import { $createImageNode } from './image-node';
+import { $createMediaNode } from './media-node';
+function dataUrlForFile(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result === 'string')
+                resolve(reader.result);
+            else
+                reject(new Error('Failed to read file'));
+        };
+        reader.onerror = () => reject(reader.error ?? new Error('Failed to read file'));
+        reader.readAsDataURL(file);
+    });
+}
+function kindForFile(file) {
+    if (file.type.startsWith('image/'))
+        return 'image';
+    if (file.type.startsWith('video/'))
+        return 'video';
+    if (file.type.startsWith('audio/'))
+        return 'audio';
+    return 'file';
+}
+function escapeAttribute(value) {
+    return value
+        .replaceAll('&', '&')
+        .replaceAll('"', '"')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;');
+}
+function markdownForMedia(result, file) {
+    const kind = result.kind ?? kindForFile(file);
+    const altText = result.altText ?? file.name;
+    if (result.markdown)
+        return result.markdown;
+    if (kind === 'video') {
+        return `<video controls src="${escapeAttribute(result.src)}"></video>`;
+    }
+    if (kind === 'audio') {
+        return `<audio controls src="${escapeAttribute(result.src)}"></audio>`;
+    }
+    return `[${altText}](${result.src})`;
+}
+export function MediaPasteDropPlugin({ onMediaUpload, }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        async function uploadFile(file) {
+            if (onMediaUpload)
+                return onMediaUpload(file);
+            return {
+                altText: file.name,
+                kind: kindForFile(file),
+                src: await dataUrlForFile(file),
+            };
+        }
+        async function insertFiles(files) {
+            for (const file of files) {
+                const result = await uploadFile(file);
+                const kind = result.kind ?? kindForFile(file);
+                editor.update(() => {
+                    if (kind === 'image') {
+                        $insertNodes([
+                            $createImageNode({
+                                altText: result.altText ?? file.name,
+                                src: result.src,
+                            }),
+                        ]);
+                        return;
+                    }
+                    if (kind === 'video' || kind === 'audio') {
+                        $insertNodes([$createMediaNode({ kind, src: result.src })]);
+                        return;
+                    }
+                    const paragraph = $createParagraphNode();
+                    paragraph.append($createTextNode(markdownForMedia(result, file)));
+                    $insertNodes([paragraph]);
+                });
+            }
+        }
+        function filesFromDataTransfer(dataTransfer) {
+            return Array.from(dataTransfer?.files ?? []).filter((file) => file.size > 0);
+        }
+        return editor.registerCommand(PASTE_COMMAND, (event) => {
+            if (!('clipboardData' in event))
+                return false;
+            const files = filesFromDataTransfer(event.clipboardData);
+            if (files.length === 0)
+                return false;
+            event.preventDefault();
+            void insertFiles(files);
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, onMediaUpload]);
+    useEffect(() => {
+        return editor.registerCommand(DROP_COMMAND, (event) => {
+            const files = Array.from(event.dataTransfer?.files ?? []).filter((file) => file.size > 0);
+            if (files.length === 0)
+                return false;
+            event.preventDefault();
+            void Promise.resolve().then(async () => {
+                for (const file of files) {
+                    const result = onMediaUpload
+                        ? await onMediaUpload(file)
+                        : {
+                            altText: file.name,
+                            kind: kindForFile(file),
+                            src: await dataUrlForFile(file),
+                        };
+                    const kind = result.kind ?? kindForFile(file);
+                    editor.update(() => {
+                        if (kind === 'image') {
+                            $insertNodes([
+                                $createImageNode({
+                                    altText: result.altText ?? file.name,
+                                    src: result.src,
+                                }),
+                            ]);
+                        }
+                        else if (kind === 'video' || kind === 'audio') {
+                            $insertNodes([$createMediaNode({ kind, src: result.src })]);
+                        }
+                        else {
+                            const paragraph = $createParagraphNode();
+                            paragraph.append($createTextNode(markdownForMedia(result, file)));
+                            $insertNodes([paragraph]);
+                        }
+                    });
+                }
+            });
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+    }, [editor, onMediaUpload]);
+    return null;
+}

package/dist/lib/lexical/sync-plugin.d.ts

@@ -2,6 +2,7 @@ interface SyncPluginProps {
     value: string;
     initialValueRef: React.MutableRefObject<string>;
 }
+export declare const EXTERNAL_MARKDOWN_SYNC_TAG = "moldable-external-markdown-sync";
 /**
  * Plugin that syncs external value changes with the editor.
  * Handles cases where the value prop changes from outside the editor.

package/dist/lib/lexical/sync-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sync-plugin.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/sync-plugin.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAChD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,eAAe,GAAG,IAAI,CAsC5E"}
+{"version":3,"file":"sync-plugin.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/sync-plugin.tsx"],"names":[],"mappings":"AAWA,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAChD;AAED,eAAO,MAAM,0BAA0B,oCAAoC,CAAA;AAE3E;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,eAAe,GAAG,IAAI,CAiD5E"}

package/dist/lib/lexical/sync-plugin.js

@@ -1,15 +1,16 @@
 'use client';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, } from './markdown-transformers';
 import { $createParagraphNode, $getRoot } from 'lexical';
+export const EXTERNAL_MARKDOWN_SYNC_TAG = 'moldable-external-markdown-sync';
 /**
  * Plugin that syncs external value changes with the editor.
  * Handles cases where the value prop changes from outside the editor.
  */
 export function SyncPlugin({ value, initialValueRef }) {
     const [editor] = useLexicalComposerContext();
-    useEffect(() => {
+    useLayoutEffect(() => {
         // Skip if this is the initial render or if value matches what we have
         if (value === initialValueRef.current) {
             return;
@@ -19,10 +20,12 @@ export function SyncPlugin({ value, initialValueRef }) {
         editor.read(() => {
             currentMarkdown = $convertToMarkdownString({
                 transformers: markdownTransformers,
+                shouldPreserveNewLines: false,
             });
         });
         // Only update if the value is actually different
         if (currentMarkdown !== value) {
+            initialValueRef.current = value;
             editor.update(() => {
                 const root = $getRoot();
                 root.clear();
@@ -31,15 +34,20 @@ export function SyncPlugin({ value, initialValueRef }) {
                         markdown: value,
                         transformers: markdownTransformers,
                         node: root,
-                        shouldPreserveNewLines: true,
+                        shouldPreserveNewLines: false,
                     });
                 }
                 else {
                     root.append($createParagraphNode());
                 }
-            });
-            initialValueRef.current = value;
+                if (root.getChildrenSize() === 0) {
+                    root.append($createParagraphNode());
+                }
+                root.selectEnd();
+            }, { discrete: true, tag: EXTERNAL_MARKDOWN_SYNC_TAG });
+            return;
         }
+        initialValueRef.current = value;
     }, [editor, value, initialValueRef]);
     return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/editor",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Rich text markdown editor for Moldable applications",
   "author": "Desiderata LLC",
   "license": "SEE LICENSE IN LICENSE",
@@ -32,18 +32,28 @@
     "src/styles",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
+    "format": "prettier --write . --ignore-path ../../.prettierignore",
+    "check-types": "tsc --noEmit"
+  },
   "dependencies": {
     "@lexical/clipboard": "^0.39.0",
     "@lexical/code": "^0.39.0",
     "@lexical/extension": "^0.39.0",
+    "@lexical/headless": "^0.39.0",
     "@lexical/html": "^0.39.0",
     "@lexical/link": "^0.39.0",
     "@lexical/list": "^0.39.0",
+    "@lexical/mark": "^0.39.0",
     "@lexical/markdown": "^0.39.0",
     "@lexical/react": "^0.39.0",
     "@lexical/rich-text": "^0.39.0",
     "@lexical/selection": "^0.39.0",
-    "@lexical/headless": "^0.39.0",
     "@lexical/utils": "^0.39.0",
     "lexical": "^0.39.0",
     "lucide-react": "^0.473.0",
@@ -52,30 +62,21 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
+    "@moldable-ai/eslint-config": "workspace:*",
+    "@moldable-ai/prettier-config": "workspace:*",
+    "@moldable-ai/typescript-config": "workspace:*",
+    "@moldable-ai/ui": "workspace:^",
     "@types/jsdom": "^27.0.0",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "jsdom": "^27.4.0",
     "typescript": "^5.8.3",
-    "vitest": "^4.0.16",
-    "@moldable-ai/eslint-config": "0.1.4",
-    "@moldable-ai/typescript-config": "0.1.3",
-    "@moldable-ai/prettier-config": "0.1.3",
-    "@moldable-ai/ui": "^0.2.7"
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
-    "@moldable-ai/ui": ">=0.2.7",
+    "@moldable-ai/ui": ">=0.2.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
-    "format": "prettier --write . --ignore-path ../../.prettierignore",
-    "check-types": "tsc --noEmit"
   }
-}
+}

package/src/styles/index.css

@@ -80,6 +80,19 @@
   word-break: break-word;
 }
 
+/* Find/replace highlights */
+.lexical-mark {
+  border-radius: 0.2em;
+  background-color: color-mix(in oklch, var(--primary) 24%, transparent);
+  color: inherit;
+  padding: 0 0.05em;
+}
+
+.lexical-mark-overlap {
+  background-color: color-mix(in oklch, var(--primary) 48%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 45%, transparent);
+}
+
 /* Mention styles */
 .mention {
   color: hsl(var(--primary));
@@ -88,3 +101,120 @@
   padding: 0 4px;
   border-radius: 4px;
 }
+
+/* Rich media nodes */
+.lexical-image-shell {
+  display: inline-block;
+  max-width: 100%;
+  position: relative;
+  vertical-align: top;
+}
+
+.lexical-image-shell-selected {
+  outline: 3px solid var(--primary);
+  outline-offset: 0;
+}
+
+.lexical-image {
+  border-radius: 0;
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+.lexical-image-resize-handle {
+  background: var(--primary);
+  border: 2px solid var(--background);
+  border-radius: 9999px;
+  bottom: -8px;
+  cursor: nwse-resize;
+  height: 16px;
+  position: absolute;
+  right: -8px;
+  width: 16px;
+}
+
+.lexical-media-shell {
+  display: block;
+  max-width: 100%;
+  width: 100%;
+}
+
+.lexical-media {
+  background: rgb(10 10 10);
+  border: 1px solid rgb(255 255 255 / 0.1);
+  border-radius: 0.5rem;
+  color-scheme: dark;
+  display: block;
+  margin: 0.75rem 0;
+  max-width: 100%;
+}
+
+.lexical-media-video {
+  max-height: min(520px, 62vh);
+  width: 100%;
+}
+
+.lexical-media-audio {
+  padding: 0.75rem;
+  width: min(100%, 40rem);
+}
+
+/* File reference typeahead */
+.moldable-editor-reference-menu {
+  background: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow:
+    0 16px 40px hsl(var(--foreground) / 0.14),
+    0 2px 8px hsl(var(--foreground) / 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: min(22rem, calc(100vw - 2rem));
+  padding: 0.25rem;
+  z-index: 50;
+}
+
+.moldable-editor-reference-option {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 0.375rem;
+  color: hsl(var(--popover-foreground));
+  cursor: pointer;
+  display: grid;
+  gap: 0.125rem;
+  justify-items: stretch;
+  min-height: 2.75rem;
+  padding: 0.45rem 0.625rem;
+  text-align: left;
+  width: 100%;
+}
+
+.moldable-editor-reference-option:hover,
+.moldable-editor-reference-option-selected {
+  background: hsl(var(--muted));
+}
+
+.moldable-editor-reference-title,
+.moldable-editor-reference-path {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.moldable-editor-reference-title {
+  color: hsl(var(--foreground));
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.15;
+}
+
+.moldable-editor-reference-path {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.71875rem;
+  line-height: 1.15;
+}

package/dist/lib/lexical/translation.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=translation.test.d.ts.map

package/dist/lib/lexical/translation.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"translation.test.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/translation.test.ts"],"names":[],"mappings":""}