@meta-1/editor 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/editor",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "keywords": [
     "meta",
     "tailwindcss",

package/src/components/tiptap-node/heading-node/heading-node.css

@@ -8,26 +8,21 @@
     @apply relative;
     color: inherit;
     font-style: inherit;
-
-    &:first-child,
-    &:first-of-type {
-      @apply mt-0;
-    }
   }
 
   h1 {
-    @apply text-2xl font-bold mt-12;
+    @apply text-2xl font-bold;
   }
 
   h2 {
-    @apply text-xl font-bold mt-10;
+    @apply text-xl font-bold;
   }
 
   h3 {
-    @apply text-lg font-semibold mt-8;
+    @apply text-lg font-semibold;
   }
 
   h4 {
-    @apply text-base font-semibold mt-8;
+    @apply text-base font-semibold;
   }
 }

package/src/editor/index.tsx

@@ -69,24 +69,35 @@ export function EditorContentArea() {
 export type Meta1EditorProps = Meta1EditorOptions & {
   /** Editor instance created by Meta1Editor.useEditor() */
   editor?: Meta1EditorInstance;
+  /** Controlled value - works with FormItem */
+  value?: Meta1EditorValue;
+  /** onChange callback - works with FormItem */
+  onChange?: (content: Meta1EditorValue) => void;
 };
 
 const Meta1EditorInner: FC<Meta1EditorProps> = (props) => {
-  const { editor: editorInstance, ...options } = props;
+  const { editor: editorInstance, value, onChange, ...options } = props;
 
   // Create the actual tiptap editor with value/onChange support
-  const tiptapEditor = useMeta1Editor(options);
+  const tiptapEditor = useMeta1Editor({
+    ...options,
+    value,
+    onChange,
+  });
 
   // Update the instance reference when editor changes
   useEffect(() => {
-    if (editorInstance?._setEditor) {
+    if (editorInstance?._setEditor && tiptapEditor) {
       editorInstance._setEditor(tiptapEditor);
+      if (options.contentType) {
+        editorInstance._contentType = options.contentType;
+      }
       editorInstance._nodeExclude = options.nodeExclude;
     }
     return () => {
       editorInstance?._setEditor?.(null);
     };
-  }, [tiptapEditor, editorInstance, options.nodeExclude]);
+  }, [tiptapEditor, editorInstance, options.contentType, options.nodeExclude]);
 
   if (!tiptapEditor) {
     return null;

package/src/hooks/use-editor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { Highlight } from "@tiptap/extension-highlight";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
 import { Mathematics } from "@tiptap/extension-mathematics";
@@ -46,9 +46,7 @@ export type Meta1EditorOptions = {
   contentType?: ContentType;
   editable?: boolean;
   imageUpload?: ImageUploadOptions;
-  value?: Meta1EditorValue;
-  onChange?: (content: Meta1EditorValue) => void;
-  /** Node types to exclude from output (e.g., ['imageUpload']) */
+  /** Node types to exclude from output (e.g., ['imageUpload'] for filtering upload placeholders) */
   nodeExclude?: string[];
 };
 
@@ -58,6 +56,8 @@ export type Meta1EditorOptions = {
 export interface Meta1EditorInstance {
   /** Internal: set the actual editor reference */
   _setEditor?: (editor: Editor | null) => void;
+  /** Internal: set contentType for value conversion */
+  _contentType?: ContentType;
   /** Internal: set nodeExclude for filtering */
   _nodeExclude?: string[];
   /** Get the underlying tiptap Editor instance */
@@ -100,14 +100,12 @@ const filterJsonNodes = (json: Record<string, unknown>, excludeTypes: string[]):
  * Filter out excluded nodes from HTML content
  */
 const filterHtmlNodes = (html: string, excludeTypes: string[]): string => {
-  // Create patterns for each excluded type
-  // imageUpload renders as: <div data-type="image-upload" ...></div>
   let result = html;
   for (const type of excludeTypes) {
     // Convert camelCase to kebab-case for data-type attribute
     const kebabType = type.replace(/([A-Z])/g, "-$1").toLowerCase();
-    // Match self-closing or content divs with data-type
-    const pattern = new RegExp(`<div[^>]*data-type="${kebabType}"[^>]*>.*?</div>`, "gi");
+    // Match divs with data-type attribute (handles both self-closing and content divs)
+    const pattern = new RegExp(`<div[^>]*data-type="${kebabType}"[^>]*>.*?</div>`, "gis");
     result = result.replace(pattern, "");
   }
   return result;
@@ -130,7 +128,7 @@ const getValueFromEditor = (editor: Editor, contentType: ContentType, nodeExclud
       return html;
     }
     case "markdown":
-      // Markdown doesn't output unsupported nodes, so no filtering needed
+      // Markdown export typically doesn't include custom nodes like imageUpload
       return editor.getMarkdown();
     default:
       return JSON.stringify(editor.getJSON());
@@ -162,6 +160,7 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   if (!instanceRef.current) {
     instanceRef.current = {
       _setEditor,
+      _contentType: "json",
       get _nodeExclude() {
         return nodeExcludeRef.current;
       },
@@ -194,7 +193,10 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   return instanceRef.current;
 };
 
-export type UseMeta1EditorProps = Meta1EditorOptions;
+export type UseMeta1EditorProps = Meta1EditorOptions & {
+  value?: Meta1EditorValue;
+  onChange?: (content: Meta1EditorValue) => void;
+};
 
 /**
  * Internal hook that creates the actual tiptap editor.
@@ -210,9 +212,11 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     contentType = "json",
     editable = true,
     imageUpload,
-    nodeExclude,
+    nodeExclude = ["imageUpload"],
   } = props;
   const isUpdatingFromPropsRef = useRef(false);
+  // Track the last value we sent via onChange to avoid sync loops
+  const lastEmittedValueRef = useRef<string | undefined>(undefined);
 
   const editor = useEditor({
     content: value,
@@ -220,7 +224,10 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     editable,
     onUpdate: ({ editor }) => {
       if (!isUpdatingFromPropsRef.current) {
-        onChange?.(getValueFromEditor(editor, contentType, nodeExclude));
+        const newValue = getValueFromEditor(editor, contentType, nodeExclude);
+        const newValueStr = typeof newValue === "string" ? newValue : JSON.stringify(newValue);
+        lastEmittedValueRef.current = newValueStr;
+        onChange?.(newValue);
       }
     },
     editorProps: {
@@ -282,5 +289,27 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     immediatelyRender: false,
   });
 
+  // Sync value from props to editor (only for external changes)
+  useEffect(() => {
+    if (!editor || value === undefined) {
+      return;
+    }
+
+    const valueStr = typeof value === "string" ? value : JSON.stringify(value);
+
+    if (lastEmittedValueRef.current === valueStr) {
+      return;
+    }
+
+    const currentContent = getValueFromEditor(editor, contentType, nodeExclude);
+    const currentStr = typeof currentContent === "string" ? currentContent : JSON.stringify(currentContent);
+
+    if (valueStr !== currentStr) {
+      isUpdatingFromPropsRef.current = true;
+      editor.commands.setContent(value);
+      isUpdatingFromPropsRef.current = false;
+    }
+  }, [editor, value, contentType, nodeExclude]);
+
   return editor;
 };