alinea 2.0.0-preview.1 → 2.0.0-preview.2

package/dist/field/richtext/PickTextLink.js

@@ -8,11 +8,20 @@ import {
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/field/richtext/PickTextLink.tsx
-import { Button, TextField } from "alinea/components";
+import { Button, DialogTrigger, TextField } from "alinea/components";
+import { Config } from "alinea/core/Config";
+import { Entry } from "alinea/core/Entry";
+import { createId } from "alinea/core/Id";
+import { imageExtensions } from "alinea/core/media/IsImage";
+import { mediaAltText } from "alinea/core/media/MediaAltField";
+import { MediaFile } from "alinea/core/media/MediaTypes";
 import { Reference } from "alinea/core/Reference";
 import { type as createType, Type } from "alinea/core/Type";
 import { NodeEditor } from "alinea/dashboard/app/EntryFields";
 import { ReactiveNode } from "alinea/dashboard/atoms/ReactiveNode";
+import { configAtom, graphAtom } from "alinea/dashboard/atoms/core";
+import { useDashboardContext } from "alinea/dashboard/hooks";
+import { ImagePicker } from "alinea/dashboard/app/ImagePicker";
 import {
   DashboardModal,
   DashboardModalCloseButton,
@@ -28,6 +37,7 @@ import { link as createLink } from "alinea/field/link";
 import {
   useCallback,
   useMemo,
+  useRef,
   useState
 } from "react";
 
@@ -43,7 +53,12 @@ function usePickTextLink() {
   const [pending, setPending] = useState();
   const pickLink = useCallback((options) => {
     return new Promise((resolve) => {
-      setPending({ options, resolve });
+      setPending({ kind: "link", options, resolve });
+    });
+  }, []);
+  const pickImage = useCallback((options) => {
+    return new Promise((resolve) => {
+      setPending({ kind: "image", options, resolve });
     });
   }, []);
   const cancel = useCallback(() => {
@@ -60,7 +75,9 @@ function usePickTextLink() {
   }, []);
   return {
     isOpen: Boolean(pending),
+    kind: pending?.kind ?? "link",
     options: pending?.options ?? {},
+    pickImage,
     pickLink,
     cancel,
     confirm
@@ -68,6 +85,7 @@ function usePickTextLink() {
 }
 function PickTextLink({ picker }) {
   if (!picker.isOpen) return null;
+  if (picker.kind === "image") return /* @__PURE__ */ jsx(PickRichTextImage, { picker });
   return /* @__PURE__ */ jsx(
     DashboardModal,
     {
@@ -79,6 +97,90 @@ function PickTextLink({ picker }) {
     }
   );
 }
+function PickRichTextImage({ picker }) {
+  const config = useAtomValue(configAtom);
+  const graph = useAtomValue(graphAtom);
+  const locale = useDashboardContext().page.locale ?? void 0;
+  const confirming = useRef(false);
+  const initialEntry = imageReferenceEntryId(picker.options.link);
+  const initialSelection = initialEntry ? [initialEntry] : [];
+  function onConfirm(selection) {
+    const [entryId] = selection;
+    if (!entryId) {
+      picker.confirm({ link: void 0 });
+      return;
+    }
+    confirming.current = true;
+    void resolveRichTextImage(
+      config,
+      graph,
+      entryId,
+      picker.options.link,
+      locale
+    ).then(picker.confirm, (error) => {
+      console.error(error);
+      picker.cancel();
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    DialogTrigger,
+    {
+      isOpen: true,
+      onOpenChange: (isOpen) => {
+        if (!isOpen && !confirming.current) picker.cancel();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Button, { style: { display: "none" }, children: "Pick image" }),
+        /* @__PURE__ */ jsx(
+          ImagePicker,
+          {
+            condition: richTextImageCondition,
+            initialSelection,
+            label: "Pick image",
+            selectionBehavior: "replace",
+            selectionMode: "single",
+            onConfirm
+          }
+        )
+      ]
+    }
+  );
+}
+async function resolveRichTextImage(config, graph, entryId, existing, locale) {
+  const image = await graph.first({
+    id: entryId,
+    status: "preferDraft",
+    select: {
+      url: Entry.url,
+      alt: MediaFile.alt
+    }
+  });
+  if (!image) throw new Error(`Image entry not found: ${entryId}`);
+  const link = {
+    [Reference.id]: existing?._id ?? createId(),
+    [Reference.type]: "image",
+    _entry: entryId
+  };
+  return {
+    alt: mediaAltText(image.alt, locale),
+    link,
+    src: URL.parse(image.url, Config.baseUrl(config) ?? window.location.href)?.href
+  };
+}
+var richTextImageCondition = {
+  _type: "MediaFile",
+  extension: {
+    in: [
+      ...imageExtensions,
+      ...imageExtensions.map((extension) => extension.toUpperCase())
+    ]
+  }
+};
+function imageReferenceEntryId(reference) {
+  if (!reference || reference._type !== "image" || !("_entry" in reference))
+    return;
+  return typeof reference._entry === "string" ? reference._entry : void 0;
+}
 function PickTextLinkForm({ picker }) {
   const modal = useDashboardModal();
   const options = picker.options;

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

@@ -1,10 +1,13 @@
 import { Reference } from 'alinea/core/Reference';
 import type { HTMLProps } from 'react';
 interface Anchor extends HTMLProps<HTMLAnchorElement> {
+    _id?: string;
+    _entry?: string;
+    _link?: 'entry' | 'file' | 'image' | 'url';
     'data-id'?: string;
     'data-entry'?: string;
     'data-anchor'?: string;
-    'data-link'?: 'entry' | 'file' | 'url';
+    'data-link'?: 'entry' | 'file' | 'image' | 'url';
     'data-suffix'?: string;
 }
 export declare function referenceToAttributes(reference: Reference): Anchor;

package/dist/field/richtext/ReferenceLink.js

@@ -42,12 +42,26 @@ function referenceToAttributes(reference) {
         target: void 0
       };
     }
+    case "image": {
+      const ref = reference;
+      return {
+        "data-id": ref[Reference.id],
+        "data-entry": ref[EntryReference.entry],
+        "data-anchor": void 0,
+        "data-link": "image",
+        "data-suffix": void 0,
+        href: void 0,
+        target: void 0
+      };
+    }
     default:
       throw new Error(`Unexpected reference type: ${reference[Reference.type]}`);
   }
 }
 function attributesToReference(attributes) {
-  const id = attributes["data-id"];
+  const id = attributes["data-id"] ?? attributes._id;
+  const entry = attributes["data-entry"] ?? attributes._entry;
+  const link = attributes["data-link"] ?? attributes._link;
   if (!id) {
     if (attributes.href)
       return {
@@ -58,12 +72,12 @@ function attributesToReference(attributes) {
       };
     return;
   }
-  if (attributes["data-entry"]) {
-    const type = attributes["data-link"] === "file" ? "file" : "entry";
+  if (entry) {
+    const type = link === "file" ? "file" : link === "image" ? "image" : "entry";
     return {
       [Reference.id]: id,
       [Reference.type]: type,
-      [EntryReference.entry]: attributes["data-entry"],
+      [EntryReference.entry]: entry,
       [EntryReference.anchor]: type === "entry" ? attributes["data-anchor"] : void 0,
       [EntryReference.suffix]: type === "entry" ? attributes["data-suffix"] : void 0
     };

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

@@ -1,4 +1,9 @@
 import { BlockNode, type TextDoc } from 'alinea/core/TextDoc';
-import type { JSONContent } from '@tiptap/core';
-export declare function editorContent(nodes: TextDoc): JSONContent;
+import { type Editor, type JSONContent } from '@tiptap/core';
+/** Include data attributes produced by custom extensions in the stored document. */
+export declare function editorDocument(editor: Editor): JSONContent;
+export declare function editorContent(nodes: TextDoc, images?: ReadonlyMap<string, {
+    src: string;
+    alt: string;
+}>): JSONContent;
 export declare function editorNodes(content: JSONContent, resolveBlock?: (id: string, typeName: string, snapshot: BlockNode | undefined) => BlockNode | undefined): TextDoc;

package/dist/field/richtext/RichTextDocument.js

@@ -1,3 +1,6 @@
+import {
+  getRenderedAttributes
+} from "../../chunks/chunk-A3XXZBOQ.js";
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/field/richtext/RichTextDocument.ts
@@ -14,17 +17,37 @@ import {
   richTextBlockValueAttribute
 } from "./RichTextBlockValue.js";
 import { isRecord } from "alinea/core/util/Objects";
-function editorContent(nodes) {
+function editorDocument(editor) {
+  function serialize(node) {
+    const content = node.toJSON();
+    if (!node.isText) {
+      const dataAttributes = Object.fromEntries(
+        Object.entries(
+          getRenderedAttributes(node, editor.extensionManager.attributes)
+        ).filter(([key, value]) => key.startsWith("data-") && value != null)
+      );
+      if (Object.keys(dataAttributes).length)
+        content.attrs = { ...content.attrs, ...dataAttributes };
+      if (node.childCount) {
+        content.content = [];
+        node.forEach((child) => content.content.push(serialize(child)));
+      }
+    }
+    return content;
+  }
+  return serialize(editor.state.doc);
+}
+function editorContent(nodes, images) {
   return {
     type: "doc",
-    content: nodes.map(nodeToContent)
+    content: nodes.length ? nodes.map((node) => nodeToContent(node, images)) : [{ type: "paragraph" }]
   };
 }
 function editorNodes(content, resolveBlock) {
   const nodes = content.content?.flatMap((node) => contentToNodes(node, resolveBlock)) ?? [];
   return isEmptyDocument(nodes) ? [] : nodes;
 }
-function nodeToContent(node) {
+function nodeToContent(node, images) {
   if (isBlock(node)) {
     return {
       type: node[Node.type],
@@ -40,6 +63,7 @@ function nodeToContent(node) {
   }
   if (isElement(node)) {
     const { [Node.type]: type, [ElementNode.content]: content, ...attrs } = node;
+    const resolvedImage = type === "image" && typeof attrs._entry === "string" ? images?.get(attrs._entry) : void 0;
     let editorContent2 = content;
     if (type === "listItem" && content?.some(isText)) {
       let flushInline2 = function() {
@@ -66,8 +90,8 @@ function nodeToContent(node) {
     }
     return {
       type,
-      attrs: withoutNullish(attrs),
-      content: editorContent2?.map(nodeToContent)
+      attrs: withoutNullish({ ...attrs, ...resolvedImage }),
+      content: editorContent2?.map((child) => nodeToContent(child, images))
     };
   }
   throw new TypeError(
@@ -98,6 +122,10 @@ function contentToNodes(content, resolveBlock) {
     return [node];
   }
   const { [richTextBlockValueAttribute]: _blockSnapshot, ...elementAttributes } = attrs ?? {};
+  if (type === "image" && elementAttributes._link === "image" && typeof elementAttributes._entry === "string") {
+    delete elementAttributes.src;
+    delete elementAttributes.alt;
+  }
   const children = content.content?.flatMap(
     (node) => contentToNodes(node, resolveBlock)
   );
@@ -158,5 +186,6 @@ function isMatchingBlock(value, id, typeName) {
 }
 export {
   editorContent,
+  editorDocument,
   editorNodes
 };

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

@@ -13,6 +13,7 @@ export declare const extensions: {
     Italic: import("@tiptap/core").Mark<import("@tiptap/extension-italic").ItalicOptions, any>;
     Strike: import("@tiptap/core").Mark<import("@tiptap/extension-strike").StrikeOptions, any>;
     HorizontalRule: TipTapNode<import("@tiptap/extension-horizontal-rule").HorizontalRuleOptions, any>;
+    Image: TipTapNode<import("@tiptap/extension-image").ImageOptions, any>;
     BulletList: TipTapNode<import("@tiptap/extension-list").BulletListOptions, any>;
     OrderedList: TipTapNode<import("@tiptap/extension-list").OrderedListOptions, any>;
     ListItem: TipTapNode<import("@tiptap/extension-list").ListItemOptions, any>;
@@ -33,7 +34,7 @@ export declare const extensions: {
     Highlight: import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any>;
     UndoRedo: Extension<import("@tiptap/extensions").UndoRedoOptions, any>;
 };
-export declare function defaultExtensionConfig(getEntryAnchors?: () => Iterable<string>): {
+export declare function defaultExtensionConfig(getEntryAnchors?: () => Iterable<string>, enableImageResize?: boolean): {
     Document: TipTapNode<any, any>;
     Text: TipTapNode<any, any>;
     Paragraph: TipTapNode<import("@tiptap/extension-paragraph").ParagraphOptions, any>;
@@ -43,6 +44,7 @@ export declare function defaultExtensionConfig(getEntryAnchors?: () => Iterable<
     Italic: import("@tiptap/core").Mark<import("@tiptap/extension-italic").ItalicOptions, any>;
     Strike: import("@tiptap/core").Mark<import("@tiptap/extension-strike").StrikeOptions, any>;
     HorizontalRule: TipTapNode<import("@tiptap/extension-horizontal-rule").HorizontalRuleOptions, any>;
+    Image: TipTapNode<import("@tiptap/extension-image").ImageOptions, any>;
     BulletList: TipTapNode<import("@tiptap/extension-list").BulletListOptions, any>;
     OrderedList: TipTapNode<import("@tiptap/extension-list").OrderedListOptions, any>;
     ListItem: TipTapNode<import("@tiptap/extension-list").ListItemOptions, any>;