@moldable-ai/editor 0.1.1

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

@@ -0,0 +1,45 @@
+'use client';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, } from './markdown-transformers';
+import { $createParagraphNode, $getRoot } from 'lexical';
+/**
+ * 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(() => {
+        // Skip if this is the initial render or if value matches what we have
+        if (value === initialValueRef.current) {
+            return;
+        }
+        // Check if the current editor content matches the incoming value
+        let currentMarkdown = '';
+        editor.read(() => {
+            currentMarkdown = $convertToMarkdownString({
+                transformers: markdownTransformers,
+            });
+        });
+        // Only update if the value is actually different
+        if (currentMarkdown !== value) {
+            editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                if (value) {
+                    $convertFromMarkdownString({
+                        markdown: value,
+                        transformers: markdownTransformers,
+                        node: root,
+                        shouldPreserveNewLines: true,
+                    });
+                }
+                else {
+                    root.append($createParagraphNode());
+                }
+            });
+            initialValueRef.current = value;
+        }
+    }, [editor, value, initialValueRef]);
+    return null;
+}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@moldable-ai/editor",
+  "version": "0.1.1",
+  "description": "Rich text markdown editor for Moldable applications",
+  "author": "Desiderata LLC",
+  "license": "Elastic-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moldable-ai/moldable.git",
+    "directory": "packages/editor"
+  },
+  "homepage": "https://moldable.sh",
+  "bugs": {
+    "url": "https://github.com/moldable-ai/moldable/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./styles": "./src/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@lexical/clipboard": "^0.39.0",
+    "@lexical/code": "^0.39.0",
+    "@lexical/extension": "^0.39.0",
+    "@lexical/html": "^0.39.0",
+    "@lexical/link": "^0.39.0",
+    "@lexical/list": "^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/utils": "^0.39.0",
+    "lexical": "^0.39.0",
+    "lucide-react": "^0.473.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@lexical/headless": "^0.39.0",
+    "@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.0.1",
+    "@moldable-ai/prettier-config": "0.0.1",
+    "@moldable-ai/typescript-config": "0.0.1",
+    "@moldable-ai/ui": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@moldable-ai/ui": "^0.1.1"
+  },
+  "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

@@ -0,0 +1,71 @@
+/**
+ * Lexical Editor Styles
+ * Include this in your app's global CSS: @import '@moldable-ai/editor/styles';
+ */
+
+/* Checklist styles */
+.lexical-listitem-checked,
+.lexical-listitem-unchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+
+.lexical-listitem-checked {
+  text-decoration: line-through;
+}
+
+.lexical-listitem-unchecked::before,
+.lexical-listitem-checked::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+
+.lexical-listitem-unchecked::before {
+  border: 1px solid hsl(var(--border));
+  border-radius: 4px;
+  background-color: transparent;
+}
+
+.lexical-listitem-checked::before {
+  border: 1px solid hsl(var(--primary));
+  border-radius: 4px;
+  background-color: hsl(var(--primary));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12px;
+}
+
+/* Nested list item styles */
+.lexical-nested-listitem {
+  list-style-type: none;
+}
+
+.lexical-nested-listitem::before {
+  display: none;
+}
+
+.lexical-nested-listitem::after {
+  display: none;
+}
+
+/* Mention styles */
+.mention {
+  color: hsl(var(--primary));
+  font-weight: 600;
+  background-color: hsl(var(--primary) / 0.1);
+  padding: 0 4px;
+  border-radius: 4px;
+}