@platecms/delta-smart-text 0.4.1 → 0.7.0

package/src/graphql/experienceComponents/experienceComponent.fragments.gql

@@ -0,0 +1,13 @@
+fragment experienceComponentFragment on ExperienceComponent {
+  _id: prn
+  prn
+  stage
+  name
+  isDraft
+  preview {
+    ...assetFragment
+  }
+  isGlobal
+  createdAt
+  updatedAt
+}

package/src/graphql/fragments.gql

@@ -0,0 +1,6 @@
+fragment pagination on PageInfo {
+  endCursor
+  hasNextPage
+  hasPreviousPage
+  startCursor
+}

package/src/graphql/gridDefinition/gridDefinition.fragments.gql

@@ -0,0 +1,5 @@
+fragment gridDefinitionFragment on GridDefinition {
+  _id: prn
+  prn
+  maxRows
+}

package/src/graphql/gridPlacements/gridPlacement.fragments.gql

@@ -0,0 +1,7 @@
+fragment gridPlacementFragment on GridPlacement {
+    _id: prn
+    prn,
+    row
+    updatedAt
+    createdAt
+}

package/src/graphql/grids/grid.fragments.gql

@@ -0,0 +1,7 @@
+fragment gridFragment on Grid {
+    _id: prn
+    prn,
+    rows
+    updatedAt
+    createdAt
+}

package/src/graphql/invitations/invitations.fragments.gql

@@ -0,0 +1,7 @@
+fragment invitationFragment on Invitation {
+    _id: prn
+    prn
+    userEmail
+    createdAt
+    updatedAt
+}

package/src/graphql/organizations/organizations.fragments.gql

@@ -0,0 +1,13 @@
+fragment organizationFragment on Organization {
+  _id: prn
+  prn
+  name
+  slug
+  logo {
+    ...assetFragment
+  }
+  logoUrl
+  seedStatus
+  createdAt
+  updatedAt
+}

package/src/graphql/pathParts/pathParts.fragments.gql

@@ -0,0 +1,19 @@
+fragment pathPartFragment on PathPart {
+    _id: prn
+    prn
+    slug
+    path
+    createdAt
+    updatedAt
+    channel {
+        prn
+    }
+    hasContentExperience
+    amountOfChildren
+    amountOfChildrenWithContentExperiences
+    amountOfDescendants
+    amountOfDescendantsWithContentExperiences
+    contentExperience {
+        prn
+    }
+}

package/src/graphql/plateMaintainers/plateMaintainer.fragements.gql

@@ -0,0 +1,10 @@
+fragment plateMaintainerFragment on Subject {
+    _id: id
+    id
+    name {
+      first
+      last
+    }
+    language
+    email
+}

package/src/graphql/roleAssignments/roleAssignment.fragments.gql

@@ -0,0 +1,9 @@
+fragment roleAssignmentFragment on RoleAssignment {
+    _id: prn
+    prn
+    subject {
+      id
+    }
+    createdAt
+    updatedAt
+}

package/src/graphql/roles/roles.fragments.gql

@@ -0,0 +1,7 @@
+fragment roleFragment on Role {
+    _id: prn
+    prn
+    name
+    createdAt
+    updatedAt
+}

package/src/graphql/subject/subject.fragments.gql

@@ -0,0 +1,8 @@
+fragment subjectFields on Subject {
+    _id: id
+    email
+    name {
+        first
+        last
+    }
+}

package/src/graphql/tags/tags.fragments.gql

@@ -0,0 +1,17 @@
+fragment tagFragment on Tag {
+  _id: prn
+  prn
+  name
+  path
+  color
+  visibility
+  forceVisibilityOnDescendants
+  stage
+  amountOfChildren
+  amountOfContentExperiences
+  amountOfContentItems
+  hasForcedVisibility
+  nestingLevel
+  createdAt
+  updatedAt
+}

package/src/graphql/themes/themes.fragments.gql

@@ -0,0 +1,8 @@
+fragment themeFragment on Theme {
+    _id: prn
+    prn
+    name
+    repositoryUrl
+    createdAt
+    updatedAt
+}

package/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/index.ts

@@ -0,0 +1,21 @@
+import { App } from "vue";
+import DeltaSlateEditorComponent from "./components/DeltaSlateEditor.vue";
+import "./index.css";
+import "../i18n";
+
+//Editor types
+export type * from "./react/types";
+
+export type DeltaSlateEditor = typeof DeltaSlateEditorComponent;
+
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    DeltaSlateEditor: DeltaSlateEditor;
+  }
+}
+
+export const smartText = {
+  install(app: App): void {
+    app.component("DeltaSlateEditor", DeltaSlateEditorComponent);
+  },
+};

package/src/locales/en.json

@@ -0,0 +1,52 @@
+{
+  "general": {
+    "word": {
+      "cancel": "Cancel",
+      "save": "Save",
+      "load_more": "Load more",
+      "back_to": "Back to"
+    }
+  },
+  "smart_text": {
+    "placeholder": "Enter some text or use the / command",
+    "toolbar": {
+      "link": {
+        "title": "Link",
+        "enter_link": "Enter a link",
+        "new_tab": "Open link in new tab",
+        "add_link": "Add link",
+        "select_section": "Select a section",
+        "select_section_description": "Select a content block to link to a specific section",
+        "no_results_found": "No results found",
+        "enter_display_text": "Enter a display text",
+        "display_text": "Display text",
+        "row": "Row",
+        "remove_anchor": "Remove anchor"
+      },
+      "content": {
+        "smart_content": "Smart content",
+        "content_library": "Content library",
+        "content_types": "Content types",
+        "no_content_types_found": "No content types found",
+        "search_content_types": "Search content types",
+        "reusable_content": "Reusable content",
+        "no_reusable_content_found": "No reusable content found",
+        "content_extract": "Save the selected text as reusable content for easy reuse across your site."
+      }
+    },
+    "content_and_format": {
+      "paragraph": "Paragraph",
+      "heading": "Heading",
+      "bulleted_list": "Bulleted list",
+      "numbered_list": "Numbered list",
+      "quote": "Quote",
+      "code": "Code",
+      "image": "Image",
+      "video": "Video",
+      "audio": "Audio",
+      "link": "Link",
+      "format": "Format",
+      "content": "Content"
+    }
+  }
+}

package/src/locales/nl.json

@@ -0,0 +1,52 @@
+{
+  "general": {
+    "word": {
+      "cancel": "Annuleren",
+      "save": "Opslaan",
+      "load_more": "Meer laden",
+      "back_to": "Terug naar"
+    }
+  },
+  "smart_text": {
+    "placeholder": "Voer tekst in of gebruik de / commando",
+    "toolbar": {
+      "link": {
+        "title": "Link",
+        "enter_link": "Voer een link in",
+        "new_tab": "Open link in nieuw tabblad",
+        "add_link": "Link toevoegen",
+        "select_section": "Selecteer een sectie",
+        "select_section_description": "Selecteer een content blok om naar een specifieke sectie te linken",
+        "no_results_found": "Geen resultaten gevonden",
+        "enter_display_text": "Voer een weergavenaam in",
+        "display_text": "Weergavenaam",
+        "row": "Rij",
+        "remove_anchor": "Verwijder anchor"
+      },
+      "content_library": {
+        "smart_content": "Smart content",
+        "content_library": "Content library",
+        "content_types": "Content types",
+        "no_content_types_found": "Geen content types gevonden",
+        "search_content_types": "Zoek content types",
+        "reusable_content": "Hergebruikbare content",
+        "no_reusable_content_found": "Geen hergebruikbare content gevonden",
+        "content_extract": "Sla de geselecteerde tekst op als hergebruikbare content voor eenvoudige hergebruik op je site."
+      }
+    },
+    "content_and_format": {
+      "paragraph": "Paragraaf",
+      "heading": "Kop",
+      "bulleted_list": "Lijst met opsommingtekens",
+      "numbered_list": "Genummerde lijst",
+      "quote": "Citaat",
+      "code": "Code",
+      "image": "Afbeelding",
+      "video": "Video",
+      "audio": "Audio",
+      "link": "Link",
+      "format": "Format",
+      "content": "Content"
+    }
+  }
+}

package/src/react/components/DeltaSlateEditor.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { BaseRange, Descendant, Editor, Range, Transforms, createEditor } from "slate";
+import {
+  Editable,
+  ReactEditor,
+  RenderElementProps,
+  RenderLeafProps,
+  RenderPlaceholderProps,
+  Slate,
+  withReact,
+} from "slate-react";
+import { useDispatch } from "react-redux";
+import { selectById, setState } from "../store/editorSlice";
+import { Toolbar } from "./toolbar/Toolbar";
+import { Leaf } from "./Leaf";
+import { Element } from "./Element";
+import { store } from "../store/store";
+import isHotkey from "is-hotkey";
+import { toggleMark } from "../utils";
+import { HOTKEYS } from "../config/hotkeys";
+import { decorate, withContentValues } from "../plugins";
+import { ContentAndFormatMenu } from "./menus/ContentAndFormatMenu";
+import "prismjs/components/prism-markdown";
+import watch from "redux-watch";
+import { LinkMenu } from "./menus/link/LinkMenu";
+import { HistoryEditor, withHistory } from "slate-history";
+import { useTranslation } from "react-i18next";
+
+export function DeltaSlateEditor({
+  uuid,
+  context,
+  isDisabled,
+}: {
+  uuid: string;
+  context: HTMLElement | null;
+  isDisabled: boolean;
+}): React.ReactElement {
+   
+  const [initialValue] = useState<Descendant[]>(selectById(store.getState(), uuid)?.initialValue ?? []);
+  const dispatch = useDispatch();
+  const editor = useMemo<Editor & ReactEditor>(() => withContentValues(withReact(withHistory(createEditor()))), []);
+  const [lastKey, setLastKey] = useState<string | undefined>();
+
+  const renderLeaf = useCallback((props: RenderLeafProps) => <Leaf {...props} />, []);
+
+  const renderElement = useCallback((props: RenderElementProps) => <Element {...props} lastKey={lastKey} />, [lastKey]);
+
+  const renderPlaceholder = useCallback(
+    (props: RenderPlaceholderProps) => (
+      <div {...props.attributes} className={"py-2"}>
+        {props.children}
+      </div>
+    ),
+    [],
+  );
+  const [searchInContentAndFormatMenuValue, setSearchInContentAndFormatMenuValue] = useState<string | null>(null);
+
+  function updateShowLinkMenu(): void {
+    setShowLinkMenu(true);
+    isDisabled = true;
+  }
+
+  const [showLinkMenu, setShowLinkMenu] = useState(false);
+
+  const { t: translate } = useTranslation();
+
+  const initialValueWatcher = watch(() => selectById(store.getState(), uuid).initialValue);
+
+  store.subscribe(
+    initialValueWatcher((newValue: Descendant[]) => {
+      /*
+       * This is a very cumbersomne way to do this and should and could probably be improved by using the correct Editor/Transforms methods.
+       * For now, this is the only way due to time constraints. It simply selects the entire context of editor and removes and inserts the new nodes
+       * TODO: improve and refactor
+       **/
+      Transforms.select(editor, []);
+      Transforms.removeNodes(editor);
+      Transforms.insertNodes(editor, newValue);
+    }),
+  );
+
+  function onSlateChange(value: Descendant[]): void {
+    handleAstChange(value);
+    dispatch(setState({ uuid, state: { target: getInsertCommandSelectionTarget() } }));
+
+    const { selection } = editor;
+    if (selection && Range.isCollapsed(selection)) {
+      const [start] = Range.edges(selection);
+      const wordBefore = Editor.before(editor, start, { unit: "word" });
+      const before = wordBefore && Editor.before(editor, wordBefore);
+      const beforeRange = before && Editor.range(editor, before, start);
+      const beforeText = beforeRange && Editor.string(editor, beforeRange);
+      const beforeMatch = beforeText?.match(/^\/(\w+)$/u);
+      const newSearchValue = beforeMatch ? beforeMatch[1] : null;
+      setSearchInContentAndFormatMenuValue(newSearchValue);
+    } else {
+      setSearchInContentAndFormatMenuValue(null);
+    }
+  }
+
+  function handleAstChange(value: Descendant[]): void {
+    const isAstChange = editor.operations.some((operation) => operation.type !== "set_selection");
+    if (isAstChange) {
+      dispatch(setState({ uuid, state: { value } }));
+    }
+  }
+
+  // Returns undefined, /[any string without whitespace] or just a /, depending on where the cursor (|) is
+  //  located.
+  // Return undefined if there is a selection (range).
+  function getInsertCommandSelectionTarget(): BaseRange | undefined {
+    const { selection } = editor;
+
+    //Check if the user has not selected range
+    if (!selection || !Range.isCollapsed(selection)) {
+      return;
+    }
+
+    const [selectionStart] = Range.edges(selection);
+
+    const charBefore = Editor.before(editor, selectionStart, { unit: "character" });
+
+    const realCharBefore =
+      charBefore &&
+      Editor.string(editor, Editor.range(editor, charBefore, { ...charBefore, offset: charBefore.offset + 1 }));
+
+    // Edge case: |/ then return undefined
+    // Edge case: | is at the beginning of the line, then return undefined
+    if (realCharBefore === " ") {
+      return;
+    }
+
+    // Check if the character before the selection start is a '/'
+    // Edge case: /| then return /
+    // Edge case: / | then return undefined
+    if (charBefore && realCharBefore === "/") {
+      const wordAfterCharBefore = Editor.after(editor, charBefore, { unit: "word" });
+
+      //Check if the char after the '/' is a space
+      if (
+        wordAfterCharBefore &&
+        Editor.string(editor, Editor.range(editor, charBefore, wordAfterCharBefore)).includes(" ")
+      ) {
+        return Editor.range(editor, charBefore, { ...charBefore, offset: charBefore.offset + 1 });
+      }
+
+      return Editor.range(editor, charBefore, wordAfterCharBefore);
+    }
+
+    // Check if the word before the selection start is a command
+    // Edge case: /jun|gle then return /jungle
+    // Edge case: / jun|gle then return undefined
+    const wordBefore = Editor.before(editor, selectionStart, { unit: "word" });
+
+    if (!wordBefore) {
+      return;
+    }
+
+    const charBeforeWordBefore = Editor.before(editor, wordBefore, { unit: "character" });
+
+    if (charBeforeWordBefore && Editor.string(editor, Editor.range(editor, charBeforeWordBefore, wordBefore)) === "/") {
+      return Editor.range(editor, charBeforeWordBefore, Editor.after(editor, wordBefore, { unit: "word" }));
+    }
+  }
+
+  const contentAndFormatMenuRef = useRef<{
+    escapeContentAndFormatMenu: () => void;
+  } | null>(null);
+
+  function onKeyDown(event: React.KeyboardEvent): void {
+    setLastKey(event.key);
+    for (const hotkey in HOTKEYS) {
+      if (isHotkey(hotkey, event)) {
+        event.preventDefault();
+        const mark = HOTKEYS[hotkey];
+        toggleMark(editor, mark);
+      }
+    }
+    const { selection } = editor;
+    if (selection && Range.isCollapsed(selection)) {
+      const { nativeEvent } = event;
+
+      if (isHotkey("left", nativeEvent)) {
+        event.preventDefault();
+        Transforms.move(editor, { unit: "offset", reverse: true });
+        return;
+      }
+      if (isHotkey("right", nativeEvent)) {
+        event.preventDefault();
+        Transforms.move(editor, { unit: "offset" });
+      }
+    }
+    if (isHotkey("escape", event)) {
+      contentAndFormatMenuRef.current?.escapeContentAndFormatMenu();
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key === "z") {
+      event.preventDefault();
+  
+      if (event.shiftKey) {
+        HistoryEditor.redo(editor as unknown as HistoryEditor);
+      } else {
+        HistoryEditor.undo(editor as unknown as HistoryEditor);
+      }
+    }
+  }
+
+  return (
+    <div className={"relative"}>
+      <Slate editor={editor} initialValue={initialValue} onChange={onSlateChange}>
+        <Toolbar uuid={uuid} context={context} />
+        <Editable
+          placeholder={translate("smart_text.placeholder")}
+          decorate={useCallback(decorate, [])}
+          renderLeaf={renderLeaf}
+          renderElement={renderElement}
+          renderPlaceholder={renderPlaceholder}
+          className={"outline-none py-2 max-h-32 overflow-y-auto overflow-x-hidden"}
+          onKeyDown={onKeyDown}
+          autoFocus={!isDisabled}
+          readOnly={isDisabled}
+        />
+        {!isDisabled && (
+          <ContentAndFormatMenu
+            uuid={uuid}
+            ref={contentAndFormatMenuRef}
+            openLinkMenu={() => updateShowLinkMenu()}
+            linkMenuIsOpen={showLinkMenu}
+            searchValue={searchInContentAndFormatMenuValue}
+          />
+        )}
+        <LinkMenu
+          menuClass={"top-full -translate-y-3"}
+          buttonText={translate("smart_text.toolbar.link.add_link")}
+          showLinkTextInput={true}
+          onClose={() => setShowLinkMenu(false)}
+          showMenu={showLinkMenu}
+        />
+      </Slate>
+    </div>
+  );
+}
+
+export default DeltaSlateEditor;

package/src/react/components/DeltaSlateEditorConnector.tsx

@@ -0,0 +1,50 @@
+// ./scr/components/DeltaSlateEditorConnector.tsx
+import Editor from "./DeltaSlateEditor";
+import { Root, createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { store } from "../store/store";
+import { setOrganization, setState } from "../store/editorSlice";
+import { ApolloClient, ApolloProvider, NormalizedCacheObject } from "@apollo/client";
+import { Organization } from "../../../__generated__/graphql";
+import "../../../i18n";
+
+export class DeltaSlateEditorConnector {
+  private readonly root: Root;
+  private readonly uuid: string;
+  private readonly context: HTMLElement | null;
+  private readonly client: ApolloClient<NormalizedCacheObject>;
+  private readonly organization: Organization | undefined;
+  private readonly isDisabled?: boolean;
+
+  public constructor(
+    targetEl: HTMLElement,
+    uuid: string,
+    client: ApolloClient<NormalizedCacheObject>,
+    context: HTMLElement | null,
+    organization: Organization | undefined,
+    isDisabled?: boolean,
+  ) {
+    this.uuid = uuid;
+    this.context = context;
+    this.client = client;
+    this.organization = organization;
+    this.isDisabled = isDisabled;
+
+    store.dispatch(setState({ uuid }));
+    store.dispatch(setOrganization({ organization }));
+    this.root = createRoot(targetEl);
+  }
+ 
+
+  public render(): void {
+    this.root.render(
+      <div>
+        <ApolloProvider client={this.client}>
+          <Provider store={store}>
+            <Editor uuid={this.uuid} context={this.context} isDisabled={this.isDisabled ?? false} />
+          </Provider>
+        </ApolloProvider>
+      </div>,
+    );
+  }
+}