alinea 2.0.0-preview.0 → 2.0.0-preview.2

package/dist/field/richtext/RichTextField.d.ts

@@ -22,10 +22,14 @@ export interface RichTextOptions<Blocks extends Schema> extends FieldOptions<Tex
     help?: ReactNode;
     /** Display a minimal version */
     inline?: boolean;
+    /** Text shown when the editor is empty */
+    placeholder?: string;
     /** Index the text value of this field */
     searchable?: boolean;
     /** Enable inserting and editing tables */
     enableTables?: boolean;
+    /** Enable inserting and editing images */
+    enableImages?: boolean;
     /** Configure the toolbar layout and items */
     toolbar?: ToolbarConfig;
     /** Configure tiptap extensions */

package/dist/field/richtext/RichTextField.story.d.ts

@@ -1,8 +1,12 @@
 export declare function RichTextStory(): import("react").JSX.Element;
 export declare function RichTextPlainStory(): import("react").JSX.Element;
+export declare function RichTextImageStory(): import("react").JSX.Element;
+export declare function RichTextImageDisabledStory(): import("react").JSX.Element;
+export declare function RichTextReadOnlyImageStory(): import("react").JSX.Element;
 export declare function RichTextLargeStory(): import("react").JSX.Element;
 export declare function RichTextImportedListStory(): import("react").JSX.Element;
 export declare function RichTextCustomToolbarStory(): import("react").JSX.Element;
 export declare function RichTextEmptyStory(): import("react").JSX.Element;
 export declare function RichTextLegacyEmptyStory(): import("react").JSX.Element;
 export declare function RichTextReadOnlyStory(): import("react").JSX.Element;
+export declare function RichTextInlineStory(): import("react").JSX.Element;

package/dist/field/richtext/RichTextField.view.js

@@ -1,8 +1,11 @@
+import {
+  Placeholder
+} from "../../chunks/chunk-AC5ATYI3.js";
 import {
   EditorContent,
   useEditor
-} from "../../chunks/chunk-7ORQ7BYK.js";
-import "../../chunks/chunk-TL7ZW6BX.js";
+} from "../../chunks/chunk-KMLLLZ6X.js";
+import "../../chunks/chunk-A3XXZBOQ.js";
 import {
   useAtomValue,
   useSetAtom,
@@ -49,7 +52,7 @@ import {
 import {
   RichTextBlockHosts
 } from "./RichTextBlockHost.js";
-import { editorContent, editorNodes } from "./RichTextDocument.js";
+import { editorContent, editorDocument, editorNodes } from "./RichTextDocument.js";
 import {
   defaultExtensionConfig,
   richTextBlockClipboard,
@@ -65,9 +68,11 @@ import {
 
 // src/field/richtext/RichTextField.module.css
 var RichTextField_default = {
+  "RichTextFieldView": "alinea-RichTextFieldView",
   "RichTextFieldView-unsupportedBlock": "alinea-RichTextFieldView-unsupportedBlock",
   "RichTextFieldViewUnsupportedBlock": "alinea-RichTextFieldView-unsupportedBlock",
-  "RichTextFieldView": "alinea-RichTextFieldView",
+  "RichTextFieldView-empty": "alinea-RichTextFieldView-empty",
+  "RichTextFieldViewEmpty": "alinea-RichTextFieldView-empty",
   "RichTextFieldCompactView": "alinea-RichTextFieldCompactView"
 };
 
@@ -112,7 +117,9 @@ function RichTextFieldView({
   const picker = usePickTextLink();
   const anchorPicker = usePickTextAnchor();
   const dashboardEditor = useDashboardEditor();
-  const entryAnchors = rootEditor(dashboardEditor).anchors;
+  const rootDashboardEditor = rootEditor(dashboardEditor);
+  const entryAnchors = rootDashboardEditor.anchors;
+  const richTextImages = rootDashboardEditor.resolvedImages;
   const getEntryAnchors = useCallback(
     () => store.get(entryAnchors).map((anchor) => anchor.id),
     [entryAnchors, store]
@@ -120,10 +127,16 @@ function RichTextFieldView({
   const readOnly = Boolean(options.readOnly || fieldNode.readOnly);
   const extensions = useMemo(() => {
     const configured = Object.values(
-      configureRichTextExtensions(
-        options.extensions,
-        defaultExtensionConfig(getEntryAnchors)
-      )
+      configureRichTextExtensions(options.extensions, {
+        ...defaultExtensionConfig(
+          getEntryAnchors,
+          Boolean(options.enableImages)
+        ),
+        Placeholder: Placeholder.configure({
+          placeholder: options.placeholder ?? (options.inline ? "Description" : ""),
+          emptyEditorClass: RichTextField_default["RichTextFieldView-empty"]
+        })
+      })
     );
     const blocks2 = richTextBlockExtensions(options.schema, hosts);
     return [
@@ -132,10 +145,18 @@ function RichTextFieldView({
       ...configured.filter((extension) => extension.name !== "doc"),
       ...blocks2
     ];
-  }, [getEntryAnchors, hosts, options.extensions, options.schema]);
+  }, [
+    getEntryAnchors,
+    hosts,
+    options.enableImages,
+    options.extensions,
+    options.inline,
+    options.placeholder,
+    options.schema
+  ]);
   const content = useMemo(
-    () => editorContent(store.get(fieldNode.value)),
-    [fieldNode, store]
+    () => editorContent(store.get(fieldNode.value), richTextImages),
+    [fieldNode, richTextImages, store]
   );
   const resolveBlock = useCallback(
     function resolveBlock2(id, typeName, snapshot) {
@@ -164,7 +185,7 @@ function RichTextFieldView({
     onCreate({ editor: editor2 }) {
       setEditorReadOnly(editor2, readOnly);
       lastEditorDocument.current = documentStructureKey(
-        editorNodes(editor2.getJSON(), resolveBlock)
+        editorNodes(editorDocument(editor2), resolveBlock)
       );
     },
     onFocus({ editor: editor2 }) {
@@ -173,7 +194,7 @@ function RichTextFieldView({
     },
     onUpdate({ editor: editor2, transaction }) {
       if (!transaction.docChanged) return;
-      const next = editorNodes(editor2.getJSON(), resolveBlock);
+      const next = editorNodes(editorDocument(editor2), resolveBlock);
       const nextKey = documentStructureKey(next);
       if (pendingExternalDocument.current && nextKey === lastEditorDocument.current)
         return;
@@ -191,15 +212,15 @@ function RichTextFieldView({
   }, [editor, readOnly]);
   useEffect(() => {
     if (!editor) return;
-    const current = editorNodes(editor.getJSON(), resolveBlock);
+    const current = editorNodes(editorDocument(editor), resolveBlock);
     if (documentKey === documentStructureKey(current)) return;
     const documentValue = store.get(fieldNode.value);
-    editor.commands.setContent(editorContent(documentValue), {
+    editor.commands.setContent(editorContent(documentValue, richTextImages), {
       emitUpdate: false
     });
     lastEditorDocument.current = documentKey;
     pendingExternalDocument.current = void 0;
-  }, [documentKey, editor, fieldNode, resolveBlock, store]);
+  }, [documentKey, editor, fieldNode, resolveBlock, richTextImages, store]);
   const toolbarTarget = typeof document === "undefined" ? null : document.getElementById("alinea-toolbar");
   function insertBlock(block) {
     if (!editor || editor.state.selection.$from.depth !== 1) return;
@@ -240,8 +261,8 @@ function RichTextFieldView({
       {
         description: options.help,
         errorMessage: error,
-        isRequired: options.required,
-        label: options.label,
+        isRequired: !options.inline && options.required,
+        label: options.inline ? void 0 : options.label,
         shared: options.shared,
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -290,8 +311,10 @@ function RichTextFieldView({
         RichTextToolbar,
         {
           editor,
+          enableImages: options.enableImages,
           enableTables: options.enableTables,
           ownerId,
+          pickImage: picker.pickImage,
           pickLink: picker.pickLink,
           pickAnchor: anchorPicker.pickAnchor,
           getEntryAnchors,
@@ -308,7 +331,7 @@ function RichTextFieldView({
 }
 function setEditorReadOnly(editor, readOnly) {
   if (editor.isDestroyed) return;
-  editor.setEditable(!readOnly, false);
+  editor.setEditable(!readOnly);
   editor.view.dom.contentEditable = readOnly ? "false" : "plaintext-only";
 }
 function RichTextBlockPortals({