@lalternative/editor 0.6.1 → 0.8.0

package/dist/index.js

@@ -23,8 +23,61 @@ function placeToolbar({
 }
 
 // src/SelectionToolbar.tsx
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
+
+// src/useViewport.ts
+import { useEffect, useState } from "react";
+
+// src/viewport.ts
+function readViewport({
+  innerWidth,
+  innerHeight,
+  visual
+}) {
+  if (!visual) {
+    return { width: innerWidth, height: innerHeight, offsetTop: 0, bottomInset: 0 };
+  }
+  const covered = innerHeight - visual.height - visual.offsetTop;
+  return {
+    width: visual.width,
+    height: visual.height,
+    offsetTop: visual.offsetTop,
+    bottomInset: Math.max(0, Math.round(covered))
+  };
+}
+
+// src/useViewport.ts
+var SERVER = { width: 0, height: 0, offsetTop: 0, bottomInset: 0 };
+function read() {
+  if (typeof window === "undefined") return SERVER;
+  return readViewport({
+    innerWidth: window.innerWidth,
+    innerHeight: window.innerHeight,
+    visual: window.visualViewport
+  });
+}
+function useViewport() {
+  const [metrics, setMetrics] = useState(read);
+  useEffect(() => {
+    const update = () => setMetrics(read());
+    update();
+    const visual = window.visualViewport;
+    visual?.addEventListener("resize", update);
+    visual?.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
+    return () => {
+      visual?.removeEventListener("resize", update);
+      visual?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
+    };
+  }, []);
+  return metrics;
+}
+
+// src/SelectionToolbar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var FALLBACK = { width: 320, height: 40 };
 function SelectionToolbar({
@@ -37,15 +90,16 @@ function SelectionToolbar({
   container
 }) {
   const ref = useRef(null);
-  const [size, setSize] = useState(FALLBACK);
-  const [formatsOpen, setFormatsOpen] = useState(false);
+  const [size, setSize] = useState2(FALLBACK);
+  const [formatsOpen, setFormatsOpen] = useState2(false);
+  const viewport = useViewport();
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const rect = el.getBoundingClientRect();
     if (rect.width > 0) setSize({ width: rect.width, height: rect.height });
   }, [selectedText, actions.length, formats.length]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!formatsOpen) return;
     const close = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setFormatsOpen(false);
@@ -57,7 +111,7 @@ function SelectionToolbar({
   const place = placeToolbar({
     selection,
     toolbar: size,
-    viewport: { width: window.innerWidth, height: window.innerHeight },
+    viewport: { width: viewport.width, height: viewport.height },
     preferBelow
   });
   return createPortal(
@@ -69,7 +123,8 @@ function SelectionToolbar({
         className: "lalt-toolbar",
         style: {
           "--lalt-toolbar-left": `${place.left}px`,
-          "--lalt-toolbar-top": `${place.top}px`
+          "--lalt-toolbar-top": `${place.top}px`,
+          "--lalt-keyboard-inset": `${viewport.bottomInset}px`
         },
         children: [
           actions.map((action) => /* @__PURE__ */ jsxs(
@@ -127,12 +182,12 @@ function SelectionToolbar({
 }
 
 // src/useSelectionToolbar.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 function useSelectionToolbar(editor) {
-  const [selection, setSelection] = useState2(null);
-  useEffect2(() => {
+  const [selection, setSelection] = useState3(null);
+  useEffect3(() => {
     if (!editor) return;
-    const read = () => {
+    const read2 = () => {
       const { state } = editor;
       const { from, to, empty } = state.selection;
       if (empty || !editor.isFocused) {
@@ -155,14 +210,14 @@ function useSelectionToolbar(editor) {
         }
       });
     };
-    read();
-    editor.on("selectionUpdate", read);
-    editor.on("blur", read);
-    editor.on("focus", read);
+    read2();
+    editor.on("selectionUpdate", read2);
+    editor.on("blur", read2);
+    editor.on("focus", read2);
     return () => {
-      editor.off("selectionUpdate", read);
-      editor.off("blur", read);
-      editor.off("focus", read);
+      editor.off("selectionUpdate", read2);
+      editor.off("blur", read2);
+      editor.off("focus", read2);
     };
   }, [editor]);
   return selection;
@@ -215,12 +270,313 @@ function isApple() {
   return /Mac|iPad|iPhone|iPod/.test(navigator.platform || navigator.userAgent);
 }
 
-// src/InlineSuggestions.ts
+// src/EditorScreen.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultSaveLabels = {
+  saving: "Enregistrement en cours",
+  saved: "Enregistr\xE9",
+  dirty: "Modifications non enregistr\xE9es"
+};
+function EditorScreen({
+  children,
+  title,
+  onTitleChange,
+  titlePlaceholder = "Titre",
+  titleLabel = "Titre",
+  saveState,
+  saveLabels = defaultSaveLabels,
+  lead,
+  actions,
+  status,
+  aside,
+  footer,
+  subnav,
+  fill = false,
+  className
+}) {
+  const { bottomInset } = useViewport();
+  const withTitle = onTitleChange !== void 0;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: [
+        "lalt-screen",
+        fill ? "lalt-screen--fill" : "",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      style: { "--lalt-keyboard": `${bottomInset}px` },
+      children: [
+        /* @__PURE__ */ jsxs2("header", { className: "lalt-screen__bar", children: [
+          lead,
+          saveState && /* @__PURE__ */ jsx2(SaveDot, { state: saveState, labels: saveLabels }),
+          status && /* @__PURE__ */ jsx2("div", { className: "lalt-screen__status", children: status }),
+          actions && /* @__PURE__ */ jsx2("div", { className: "lalt-screen__actions", children: actions })
+        ] }),
+        subnav && /* @__PURE__ */ jsx2("div", { className: "lalt-screen__subnav", children: subnav }),
+        /* @__PURE__ */ jsx2("div", { className: "lalt-screen__scroll", children: /* @__PURE__ */ jsxs2("div", { className: "lalt-screen__column", children: [
+          withTitle && /* @__PURE__ */ jsx2(
+            "input",
+            {
+              className: "lalt-screen__title",
+              value: title ?? "",
+              onChange: (event) => onTitleChange(event.target.value),
+              placeholder: titlePlaceholder,
+              "aria-label": titleLabel
+            }
+          ),
+          aside && /* @__PURE__ */ jsx2("div", { className: "lalt-screen__aside", children: aside }),
+          children,
+          footer && /* @__PURE__ */ jsx2("div", { className: "lalt-screen__footer", children: footer })
+        ] }) })
+      ]
+    }
+  );
+}
+function SaveDot({ state, labels }) {
+  if (state === "idle") return /* @__PURE__ */ jsx2("span", { className: "lalt-screen__save" });
+  const label = state === "saving" ? labels.saving : state === "dirty" ? labels.dirty : labels.saved;
+  return /* @__PURE__ */ jsxs2("span", { className: "lalt-screen__save", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx2("span", { className: `lalt-screen__dot lalt-screen__dot--${state}`, "aria-hidden": true }),
+    /* @__PURE__ */ jsx2("span", { className: "lalt-screen__sr", children: label })
+  ] });
+}
+
+// src/slash.ts
+var defaultSlashLabels = {
+  heading1: "Titre 1",
+  heading2: "Titre 2",
+  bulletList: "Liste \xE0 puces",
+  orderedList: "Liste num\xE9rot\xE9e",
+  blockquote: "Citation",
+  codeBlock: "Bloc de code",
+  horizontalRule: "S\xE9parateur"
+};
+function defaultSlashItems({
+  labels = defaultSlashLabels,
+  descriptions = {},
+  icons = {}
+} = {}) {
+  const item = (id, shortcut, run) => ({
+    id,
+    title: labels[id],
+    description: descriptions[id],
+    shortcut,
+    icon: icons[id],
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).run();
+      run(editor);
+    }
+  });
+  return [
+    item(
+      "heading1",
+      "#",
+      (editor) => editor.chain().focus().setNode("heading", { level: 1 }).run()
+    ),
+    item(
+      "heading2",
+      "##",
+      (editor) => editor.chain().focus().setNode("heading", { level: 2 }).run()
+    ),
+    item(
+      "bulletList",
+      "-",
+      (editor) => editor.chain().focus().toggleBulletList().run()
+    ),
+    item(
+      "orderedList",
+      "1.",
+      (editor) => editor.chain().focus().toggleOrderedList().run()
+    ),
+    item(
+      "blockquote",
+      ">",
+      (editor) => editor.chain().focus().toggleBlockquote().run()
+    ),
+    item(
+      "codeBlock",
+      "```",
+      (editor) => editor.chain().focus().toggleCodeBlock().run()
+    ),
+    item(
+      "horizontalRule",
+      "---",
+      (editor) => editor.chain().focus().setHorizontalRule().run()
+    )
+  ];
+}
+function filterSlashItems(items, query) {
+  const q = query.trim().toLowerCase();
+  if (q === "") return items;
+  return items.filter((item) => item.title.toLowerCase().includes(q));
+}
+
+// src/SlashMenu.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect4,
+  useImperativeHandle,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SlashMenu = forwardRef(
+  function SlashMenu2({ items, command, emptyLabel = "Aucune commande" }, ref) {
+    const [selectedIndex, setSelectedIndex] = useState4(0);
+    const itemsRef = useRef2(items);
+    itemsRef.current = items;
+    const commandRef = useRef2(command);
+    commandRef.current = command;
+    const selectedRef = useRef2(selectedIndex);
+    selectedRef.current = selectedIndex;
+    const ids = items.map((item) => item.id).join(" ");
+    useEffect4(() => {
+      setSelectedIndex(0);
+      selectedRef.current = 0;
+    }, [ids]);
+    const selectItem = useCallback((index) => {
+      const item = itemsRef.current[index];
+      if (item) commandRef.current(item);
+    }, []);
+    const move = useCallback((delta) => {
+      const count = itemsRef.current.length;
+      if (count === 0) return;
+      const next = (selectedRef.current + delta + count) % count;
+      selectedRef.current = next;
+      setSelectedIndex(next);
+    }, []);
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === "ArrowUp") {
+          move(-1);
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          move(1);
+          return true;
+        }
+        if (event.key === "Enter" || event.key === "Tab") {
+          if (itemsRef.current.length === 0) return false;
+          selectItem(selectedRef.current);
+          return true;
+        }
+        return false;
+      }
+    }));
+    if (items.length === 0) {
+      return /* @__PURE__ */ jsx3("div", { className: "lalt-slash lalt-slash--empty", children: emptyLabel });
+    }
+    return /* @__PURE__ */ jsx3("div", { className: "lalt-slash", role: "listbox", children: items.map((item, index) => /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": index === selectedIndex,
+        className: index === selectedIndex ? "lalt-slash__item lalt-slash__item--active" : "lalt-slash__item",
+        onMouseDown: (event) => {
+          event.preventDefault();
+          selectItem(index);
+        },
+        onMouseEnter: () => {
+          selectedRef.current = index;
+          setSelectedIndex(index);
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsx3("span", { className: "lalt-slash__icon", "aria-hidden": true, children: item.icon }),
+          /* @__PURE__ */ jsxs3("span", { className: "lalt-slash__text", children: [
+            /* @__PURE__ */ jsx3("span", { className: "lalt-slash__title", children: item.title }),
+            item.description && /* @__PURE__ */ jsx3("span", { className: "lalt-slash__description", children: item.description })
+          ] }),
+          item.shortcut && /* @__PURE__ */ jsx3("kbd", { className: "lalt-slash__shortcut", children: item.shortcut })
+        ]
+      },
+      item.id
+    )) });
+  }
+);
+
+// src/SlashCommands.ts
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { ReactRenderer } from "@tiptap/react";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion from "@tiptap/suggestion";
+var OFFSET = 6;
+var SlashCommands = Extension.create({
+  name: "laSlashCommands",
+  addOptions() {
+    return {
+      items: () => [],
+      char: "/",
+      pluginKey: new PluginKey("laSlashCommands")
+    };
+  },
+  addProseMirrorPlugins() {
+    const { items, char, emptyLabel, pluginKey } = this.options;
+    const suggestion = {
+      char,
+      pluginKey,
+      startOfLine: false,
+      items: ({ query }) => filterSlashItems(items(), query),
+      render: () => {
+        let component = null;
+        let container = null;
+        const place = (clientRect) => {
+          if (!container || !clientRect) return;
+          const rect = clientRect();
+          if (!rect) return;
+          container.style.top = `${rect.bottom + OFFSET}px`;
+          container.style.left = `${rect.left}px`;
+        };
+        const close = () => {
+          container?.remove();
+          container = null;
+          component?.destroy();
+          component = null;
+        };
+        return {
+          onStart: (props) => {
+            component = new ReactRenderer(SlashMenu, {
+              props: { ...props, emptyLabel },
+              editor: props.editor
+            });
+            container = document.createElement("div");
+            container.className = "lalt-slash-anchor";
+            container.appendChild(component.element);
+            document.body.appendChild(container);
+            place(props.clientRect);
+          },
+          onUpdate: (props) => {
+            component?.updateProps({ ...props, emptyLabel });
+            place(props.clientRect);
+          },
+          onKeyDown: (props) => {
+            if (props.event.key === "Escape") {
+              close();
+              return true;
+            }
+            return component?.ref?.onKeyDown(props) ?? false;
+          },
+          onExit: close
+        };
+      }
+    };
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...suggestion,
+        command: ({ editor, range, props }) => props.command({ editor, range })
+      })
+    ];
+  }
+});
+
+// src/InlineSuggestions.ts
+import { Extension as Extension2 } from "@tiptap/core";
+import { Plugin, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-var inlineSuggestionsKey = new PluginKey("lalt-inline-suggestions");
-var InlineSuggestions = Extension.create({
+var inlineSuggestionsKey = new PluginKey2("lalt-inline-suggestions");
+var InlineSuggestions = Extension2.create({
   name: "lalt-inline-suggestions",
   addOptions() {
     return { actions: null };
@@ -385,19 +741,28 @@ function text(node) {
   return out;
 }
 export {
+  EditorScreen,
   InlineSuggestions,
   SelectionToolbar,
+  SlashCommands,
+  SlashMenu,
   blockFormats,
   blocksFromDoc,
   defaultFormatLabels,
+  defaultSaveLabels,
+  defaultSlashItems,
+  defaultSlashLabels,
   diffBlocks,
   docFromBlocks,
   docToMarkdown,
   expandToWords,
+  filterSlashItems,
   inlineSuggestionsKey,
   placeToolbar,
+  readViewport,
   shapesFromDoc,
   splitRevision,
-  useSelectionToolbar
+  useSelectionToolbar,
+  useViewport
 };
 //# sourceMappingURL=index.js.map