@platecms/delta-smart-text 0.6.0 → 0.7.0

package/src/react/plugins/index.ts

@@ -0,0 +1,59 @@
+import { Editor, NodeEntry, Range, Text } from "slate";
+import Prism, { Token } from "prismjs";
+
+export function withContentValues(editor: Editor): Editor {
+  const { isInline, isVoid, markableVoid } = editor;
+
+  editor.isInline = (element): boolean =>
+    element.type === "contentValue" || element.type === "link" ? true : isInline(element);
+
+  editor.isVoid = (element): boolean => (element.type === "contentValue" ? true : isVoid(element));
+
+  editor.markableVoid = (element): boolean => (element.type === "contentValue" ? true : markableVoid(element));
+
+  return editor;
+}
+
+export function decorate([node, path]: NodeEntry): Range[] {
+  const ranges: Range[] = [];
+
+  if (!Text.isText(node)) {
+    return ranges;
+  }
+
+  function getLength(token: Token | string): number {
+    if (typeof token === "string") {
+      return token.length;
+    }
+
+    if (typeof token.content === "string") {
+      return token.content.length;
+    }
+
+    if (Array.isArray(token.content)) {
+      return token.content.reduce((length, tokenContent): number => length + getLength(tokenContent), 0);
+    }
+
+    return 0;
+  }
+
+  const tokens = Prism.tokenize(node.text, Prism.languages.markdown);
+  let start = 0;
+
+  for (const token of tokens) {
+    const length = getLength(token);
+    const end = start + length;
+
+    if (typeof token !== "string") {
+      ranges.push({
+        [token.type]: true,
+        anchor: { path, offset: start },
+        focus: { path, offset: end },
+      });
+    }
+
+    start = end;
+  }
+
+  return ranges;
+}

package/src/react/store/editorSlice.ts

@@ -0,0 +1,124 @@
+import { BaseSelection, Descendant } from "slate";
+import { createSelector, createSlice } from "@reduxjs/toolkit";
+import { ContentItem, ContentType, Organization } from "../../../__generated__/graphql";
+
+interface EditorSlice {
+  organization: Organization | undefined;
+  states: EditorState[];
+}
+
+export interface EditorState {
+  uuid: string;
+  search: string;
+  target: BaseSelection | undefined;
+  initialValue: Descendant[];
+  value: Descendant[];
+  selected: {
+    contentType: string | undefined;
+    contentItem: string | undefined;
+  };
+  options: {
+    contentTypes: ContentType[];
+    contentItems: Record<string, ContentItem[]>;
+  };
+}
+
+export const defaultEditorFieldState: Omit<EditorState, "uuid"> = {
+  search: "",
+  initialValue: [],
+  value: [],
+  target: undefined,
+  selected: {
+    contentType: undefined,
+    contentItem: undefined,
+  },
+  options: {
+    contentTypes: [],
+    contentItems: {},
+  },
+};
+
+const initialState: EditorSlice = {
+  organization: undefined,
+  states: [],
+};
+
+function selectStates(state: EditorSlice): EditorState[] {
+  return state.states;
+}
+
+function selectStateIndex(state: EditorSlice, uuid: string): number {
+  return state.states.findIndex((stateToFilter) => stateToFilter.uuid === uuid);
+}
+
+function selectCurrentOrganization(state: EditorSlice): Organization | undefined {
+  return state.organization;
+}
+
+const selectStateById = createSelector([selectStates, selectStateIndex], (states, index) => states[index]);
+
+const editorSlice = createSlice({
+  name: "editor",
+  initialState,
+  reducers: {
+    setOrganization: (state, action: { payload: { organization: Organization | undefined } }) => {
+      state.organization = action.payload.organization;
+    },
+    setState: (
+      state,
+      action: { payload: { uuid: string; state?: Partial<Omit<EditorState, "uuid">>; context?: string } },
+    ) => {
+      const currentState = state.states.find((stateToFilter) => stateToFilter.uuid === action.payload.uuid);
+
+      if (!currentState) {
+        state.states.push({
+          uuid: action.payload.uuid,
+          ...defaultEditorFieldState,
+          ...action.payload.state,
+        });
+        return;
+      }
+
+      if (action.payload.state?.search !== undefined) {
+        currentState.search = action.payload.state.search;
+      }
+      if (action.payload.state?.selected) {
+        currentState.selected = action.payload.state.selected;
+      }
+
+      if (action.payload.state && "target" in action.payload.state) {
+        currentState.target = action.payload.state.target;
+      }
+      currentState.value = action.payload.state?.value ?? currentState.value;
+      currentState.initialValue = action.payload.state?.initialValue ?? currentState.initialValue;
+    },
+    setInitialValue: (state, action: { payload: { uuid: string; initialValue: Descendant[] } }) => {
+      const currentState = state.states.find((stateToFilter) => stateToFilter.uuid === action.payload.uuid);
+
+      if (!currentState) {
+        return;
+      }
+
+      currentState.initialValue = action.payload.initialValue;
+    },
+  },
+  selectors: {
+    selectStates,
+    selectStateIndex,
+    selectStateById,
+    selectCurrentOrganization,
+    selectStateByIdTarget: createSelector([selectStateById], (state) => state.target),
+    selectStateByIdSelected: createSelector([selectStateById], (state) => state.selected),
+  },
+});
+
+export const {
+  selectStateById: selectById,
+  selectStateByIdTarget: selectByIdTarget,
+  selectStateByIdSelected: selectByIdSelected,
+  selectCurrentOrganization: selectOrganization,
+} = editorSlice.selectors;
+
+export const { setState, setOrganization, setInitialValue } = editorSlice.actions;
+
+export default editorSlice.reducer;

package/src/react/store/store.ts

@@ -0,0 +1,12 @@
+import { Action, Store, ThunkAction, configureStore } from "@reduxjs/toolkit";
+import editorReducer from "./editorSlice";
+
+export const store: Store = configureStore({
+  reducer: {
+    editor: editorReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

package/src/react/types.ts

@@ -0,0 +1,87 @@
+import { BaseEditor } from "slate";
+import { ReactEditor } from "slate-react";
+import { Root } from "@platecms/delta-cast";
+
+declare module "slate" {
+  interface CustomTypes {
+    Editor: BaseEditor & ReactEditor;
+    Element: DeltaElement;
+    Text: DeltaLeaf;
+  }
+}
+
+export interface DeltaLeafMarkdown {
+  title?: boolean;
+}
+
+export type DeltaElement =
+  | BlockquoteElement
+  | CodeElement
+  | ContentValueElement
+  | HeadingElement
+  | LinkElement
+  | ListElement
+  | ListItemElement
+  | ParagraphElement;
+
+export type DeltaLeaf = DeltaLeafMarkdown & {
+  text: string;
+  bold?: true;
+  italic?: true;
+  underline?: true;
+  strikethrough?: true;
+  inlineCode?: true;
+  highlight?: true;
+};
+
+export interface ParagraphElement {
+  type: "paragraph";
+  children: (ContentValueElement | DeltaLeaf | LinkElement)[];
+}
+
+export interface HeadingElement {
+  type: "heading";
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  children: DeltaLeaf[];
+}
+
+export interface ListElement {
+  type: "list";
+  ordered: boolean;
+  children: ListItemElement[];
+}
+
+export interface ListItemElement {
+  type: "listItem";
+  children: DeltaLeaf[];
+}
+
+export interface BlockquoteElement {
+  type: "blockquote";
+  children: DeltaLeaf[];
+}
+
+export interface CodeElement {
+  type: "code";
+  children: DeltaLeaf[];
+}
+
+export interface ContentValueElement {
+  type: "contentValue";
+  prn: string;
+  root: Root | undefined;
+  children: DeltaLeaf[];
+}
+
+export interface LinkElement {
+  type: "link";
+  url: string;
+  children: DeltaLeaf[];
+
+  target?: "_parent" | "_top" | "blank" | "self";
+
+  internal?: {
+    prn: string;
+    anchor?: boolean;
+  };
+}

package/src/react/utils/decorator.ts

@@ -0,0 +1,61 @@
+import { DeltaLeaf } from "../types";
+
+export type Decorator<T> = (element: T, decorations: string[]) => string[];
+export type LeafDecorator = Decorator<DeltaLeaf>;
+
+function fontWeight(leaf: DeltaLeaf, decorations: string[]): string[] {
+  if (leaf.bold) {
+    decorations.push("font-bold");
+  }
+
+  return decorations;
+}
+
+function fontSize(leaf: DeltaLeaf, decorations: string[]): string[] {
+  if (leaf.title) {
+    decorations.push(`text-2xl`);
+  }
+
+  return decorations;
+}
+
+function fontStyle(leaf: DeltaLeaf, decorations: string[]): string[] {
+  if (leaf.italic) {
+    decorations.push("italic");
+  }
+
+  return decorations;
+}
+
+function textDecoration(leaf: DeltaLeaf, decorations: string[]): string[] {
+  if (leaf.underline) {
+    decorations.push("underline");
+  }
+  if (leaf.strikethrough) {
+    decorations.push("line-through");
+  }
+
+  return decorations;
+}
+
+export class DecoratorBuilder<T extends object> {
+  private readonly decorators: Decorator<T>[] = [];
+
+  public constructor(private readonly element: T) {}
+
+  public add(decorator: Decorator<T>): DecoratorBuilder<T> {
+    this.decorators.push(decorator);
+
+    return this;
+  }
+
+  public build(): (decorations: string[]) => string[] {
+    return (decorations: string[]): string[] => {
+      this.decorators.forEach((decorator) => decorator(this.element, decorations));
+
+      return decorations;
+    };
+  }
+}
+
+export { fontSize, fontWeight, fontStyle, textDecoration };

package/src/react/utils/index.ts

@@ -0,0 +1,110 @@
+import { BaseEditor, Editor, Element, Node, Transforms } from "slate";
+import { DeltaElement, DeltaLeaf, HeadingElement, ListElement } from "../types";
+import { ReactEditor } from "slate-react";
+import React, { useEffect } from "react";
+
+export function hasMark(editor: Editor, format: keyof Omit<DeltaLeaf, "text">): boolean {
+  const marks: Omit<DeltaLeaf, "text"> | null = Editor.marks(editor);
+
+  return marks ? marks[format] === true : false;
+}
+
+export function toggleMark(editor: Editor, format: keyof Omit<DeltaLeaf, "text">): void {
+  const isActive = hasMark(editor, format);
+
+  if (isActive) {
+    Editor.removeMark(editor, format);
+    return;
+  }
+
+  Editor.addMark(editor, format, true);
+}
+
+export function isBlockActive(
+  editor: BaseEditor & ReactEditor,
+  format: "code" | "heading" | "list",
+  properties?: { level?: HeadingElement["level"]; ordered?: ListElement["ordered"] },
+): boolean {
+  const { selection } = editor;
+  if (!selection) {
+    return false;
+  }
+
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: (node: Node) =>
+        !Editor.isEditor(node) &&
+        Element.isElement(node) &&
+        node.type === format &&
+        (node.type === "heading" ? node.level === properties?.level : true) &&
+        (node.type === "list" ? node.ordered === properties?.ordered : true),
+    }),
+  );
+
+  return Boolean(match);
+}
+
+export function toggleBlock(
+  editor: BaseEditor & ReactEditor,
+  format: "code" | "heading" | "list",
+  properties?: { level?: HeadingElement["level"]; ordered?: ListElement["ordered"] },
+): void {
+  const isActive = isBlockActive(editor, format, properties);
+
+  Transforms.unwrapNodes(editor, {
+    match: (node) => Element.isElement(node) && node.type === "list",
+    split: true,
+  });
+
+  let newProperties: Partial<DeltaElement>;
+
+  if (!isActive) {
+    newProperties = { type: format === "list" ? "listItem" : format, level: properties?.level };
+  } else {
+    newProperties = { type: "paragraph" };
+  }
+
+  Transforms.setNodes<DeltaElement>(editor, newProperties);
+
+  if (!isActive && format === "list") {
+    const block = { type: format, ordered: properties?.ordered, children: [] };
+    Transforms.wrapNodes(editor, block as DeltaElement);
+  }
+}
+
+export function useClickOutside(ref: React.RefObject<HTMLElement | null>, callback: () => void): void {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent): void {
+      if (ref.current && !ref.current.contains(event.target as HTMLElement)) {
+        callback();
+      }
+    }
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return (): void => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+}
+
+/**
+ * Finds the element of the given type at the selection.
+ * @param editor - The editor instance.
+ * @param elementType - The type of element to find.
+ * @returns The element and its path if found, otherwise undefined.
+ */
+export function findElement(editor: Editor, elementType: string): [Element, number[]] | undefined {
+  if (!editor.selection) {
+    return undefined;
+  }
+
+  return Editor.above(editor, {
+    match: (node) => !Editor.isEditor(node) && Element.isElement(node) && node.type === elementType,
+  }) as [Element, number[]] | undefined;
+}
+
+export function hasElementSelected(editor: Editor, elementType: string): boolean {
+  return findElement(editor, elementType) !== undefined;
+}

package/src/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { defineComponent } from "vue";
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": false,
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "lib": ["es2022", "dom"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../generated/dist/packages/delta-smart-text",
+    "types": ["vite/client"]
+  },
+  "exclude": [
+    "src/**/__tests__/*",
+    "src/**/*.spec.vue",
+    "src/**/*.test.vue",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "codegen.config.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../generated/dist/packages/delta-smart-text",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node", "vitest"]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,67 @@
+/// <reference types='vitest' />
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import dts from "vite-plugin-dts";
+import * as path from "path";
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+import { nxCopyAssetsPlugin } from "@nx/vite/plugins/nx-copy-assets.plugin";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: "../../node_modules/.vite/packages/delta-smart-text",
+  plugins: [
+    vue(),
+    react(),
+    tailwindcss(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(["*.md"]),
+    dts({ entryRoot: "src", tsconfigPath: path.join(__dirname, "tsconfig.lib.json") }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: "../../dist/packages/delta-smart-text",
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: "src/index.ts",
+      name: "delta-smart-text",
+      fileName: "index",
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ["es", "cjs"],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ["vue", "react", "react-dom"],
+      output: {
+        globals: {
+          vue: "Vue",
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: "jsdom",
+    passWithNoTests: true,
+    reporters: ["default"],
+    coverage: {
+      reportsDirectory: "../../generated/coverage/packages/delta-smart-text",
+      clean: true,
+    },
+  },
+});

package/components/DeltaSlateEditor.vue.d.ts

@@ -1,26 +0,0 @@
-import { Descendant } from 'slate';
-import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
-import { Organization } from '../../__generated__/graphql';
-type __VLS_Props = {
-    uuid?: string;
-    initialValue?: Descendant[];
-    context: HTMLElement | null;
-    client: ApolloClient<NormalizedCacheObject>;
-    organization: Organization | undefined;
-    isDisabled?: boolean;
-};
-type __VLS_PublicProps = {
-    'tree'?: any;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
-    setValue: (value: Descendant[]) => void;
-    setInitialValue: (value: Descendant[]) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:tree": (value: any) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:tree"?: ((value: any) => any) | undefined;
-}>, {
-    uuid: string;
-    initialValue: Descendant[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-export default _default;