@platecms/delta-smart-text 0.13.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platecms/delta-smart-text",
-  "version": "0.13.0",
+  "version": "1.2.0",
   "description": "Provides a component to display smart text by using slate.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -23,11 +23,11 @@
     "./index.css": "./index.css"
   },
   "dependencies": {
-    "@platecms/delta-cast": "0.13.0",
-    "@platecms/delta-plate-resource-notation": "0.13.0",
+    "@platecms/delta-cast": "1.2.0",
+    "@platecms/delta-plate-resource-notation": "1.2.0",
     "@graphql-codegen/cli": "5.0.7",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@platecms/delta-cast-util-to-plaintext": "0.13.0",
+    "@platecms/delta-cast-util-to-plaintext": "1.2.0",
     "@reduxjs/toolkit": "2.8.2",
     "class-transformer": "0.5.1",
     "graphql": "16.11.0",

package/src/components/DeltaSlateEditor.vue

@@ -8,16 +8,19 @@ import {
 } from "../react/store/editorSlice";
 import { store } from "../react/store/store";
 import { setState } from "../react/store/editorSlice";
-import {Descendant} from "slate";
 import watch from "redux-watch";
 import { ApolloClient, NormalizedCacheObject } from "@apollo/client";
 import { Organization } from "../../__generated__/graphql";
+import { Root } from "@platecms/delta-cast";
+import { toSlate } from "@platecms/delta-cast-util-to-slate";
+import { fromSlate } from "@platecms/delta-cast-util-from-slate";
 
 let connector: DeltaSlateEditorConnector;
 
 const props = withDefaults(defineProps<{
   uuid?: string
-  initialValue?: Descendant[]
+  current?: Root
+  initial?: Root
   context: HTMLElement | null
   client: ApolloClient<NormalizedCacheObject>
   organization: Organization | undefined
@@ -32,43 +35,51 @@ const props = withDefaults(defineProps<{
   ],
 })
 
-const tree = defineModel('tree')
-
-defineExpose({
-  setValue: (value: Descendant[]) => {
-    store.dispatch(setState({ uuid: props.uuid, state: { value, initialValue: value } }))
-  },
-  setInitialValue: (value: Descendant[]) => {
-    store.dispatch(setInitialValue({ uuid: props.uuid, initialValue: value }))
-  }
-})
+const emit = defineEmits<{
+  (e: 'update:current', value: Root): void
+}>()
 
 function mountReduxWatchers() {
   const treeWatcher = watch(() => selectById(store.getState(), props.uuid).value)
 
   store.subscribe(treeWatcher((newValue) => {
-    tree.value = newValue
+    emit('update:current', fromSlate(newValue))
   }))
 }
 
+function updateTree(value: Root) {
+  store.dispatch(setInitialValue({ uuid: props.uuid, initialValue: toSlate(valueOrDefault(value)) }))
+
+}
+
+function valueOrDefault(value: Root | undefined): Root {
+  return value ?? {
+    type: 'root',
+    children: [{
+      type: 'paragraph',
+      children: [{ type: 'text', value: '' }]
+    }]
+  }
+}
+
 function setup() {
   connector = new DeltaSlateEditorConnector(document.getElementById(props.uuid)!, props.uuid, props.client, props.context, props.organization, props.isDisabled)
   connector.render()
   
-  store.dispatch(setState({ uuid: props.uuid, state: { initialValue: props.initialValue, value: props.initialValue } }))
+  store.dispatch(setState({ uuid: props.uuid, state: { initialValue: toSlate(valueOrDefault(props.initial)), value: toSlate(valueOrDefault(props.current)) } }))
 
   mountReduxWatchers()
 }
 
+defineExpose({
+  updateTree
+})
+
 onMounted(() => {
   setup()
 })
-</script>
+</script> 
 
 <template>
-  <div :id="uuid" />
+  <div :id="uuid" class="slate-editor"/>
 </template>
-
-<style scoped>
-
-</style>

package/src/react/components/DeltaSlateEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { BaseRange, Descendant, Editor, Range, Transforms, createEditor } from "slate";
+import { BaseRange, Descendant, Editor, Node, Range, Transforms, createEditor } from "slate";
 import {
   Editable,
   ReactEditor,
@@ -18,7 +18,7 @@ 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 { decorate, withContentValues, withSuggestions } from "../plugins";
 import { ContentAndFormatMenu } from "./menus/ContentAndFormatMenu";
 import "prismjs/components/prism-markdown";
 import watch from "redux-watch";
@@ -37,8 +37,9 @@ export function DeltaSlateEditor({
 }): React.ReactElement {
    
   const [initialValue] = useState<Descendant[]>(selectById(store.getState(), uuid)?.initialValue ?? []);
+  
   const dispatch = useDispatch();
-  const editor = useMemo<Editor & ReactEditor>(() => withContentValues(withReact(withHistory(createEditor()))), []);
+  const editor = useMemo<Editor & ReactEditor>(() => withContentValues(withSuggestions(withReact(withHistory(createEditor())))), []);
   const [lastKey, setLastKey] = useState<string | undefined>();
 
   const renderLeaf = useCallback((props: RenderLeafProps) => <Leaf {...props} />, []);
@@ -47,9 +48,9 @@ export function DeltaSlateEditor({
 
   const renderPlaceholder = useCallback(
     (props: RenderPlaceholderProps) => (
-      <div {...props.attributes} className={"py-2"}>
+      <span {...props.attributes} className={"py-2.5"}>
         {props.children}
-      </div>
+      </span>
     ),
     [],
   );
@@ -76,7 +77,7 @@ export function DeltaSlateEditor({
       Transforms.select(editor, []);
       Transforms.removeNodes(editor);
       Transforms.insertNodes(editor, newValue);
-    }),
+    })
   );
 
   function onSlateChange(value: Descendant[]): void {
@@ -204,8 +205,11 @@ export function DeltaSlateEditor({
     }
   }
 
+  const hasInitialValue = Boolean(initialValue[0] && Node.string(initialValue[0]));
+  
   return (
-    <div className={"relative"}>
+    <div 
+      className={"relative"}>
       <Slate editor={editor} initialValue={initialValue} onChange={onSlateChange}>
         <Toolbar uuid={uuid} context={context} />
         <Editable
@@ -214,7 +218,8 @@ export function DeltaSlateEditor({
           renderLeaf={renderLeaf}
           renderElement={renderElement}
           renderPlaceholder={renderPlaceholder}
-          className={"outline-none py-2 max-h-32 overflow-y-auto overflow-x-hidden"}
+          style={{ position: 'relative', whiteSpace: 'pre-wrap', overflowWrap: 'break-word', minHeight: hasInitialValue ? 'auto' : '3.85rem' }}
+          className={"outline-none py-2 overflow-y-auto resize-y pr-2 "}
           onKeyDown={onKeyDown}
           autoFocus={!isDisabled}
           readOnly={isDisabled}

package/src/react/components/DeltaSlateEditorConnector.tsx

@@ -34,14 +34,16 @@ export class DeltaSlateEditorConnector {
     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} />
+            <Editor
+              uuid={this.uuid}
+              context={this.context}
+              isDisabled={this.isDisabled ?? false} />
           </Provider>
         </ApolloProvider>
       </div>,

package/src/react/components/Element.tsx

@@ -6,6 +6,8 @@ import LinkElement from "./elements/LinkElement";
 import { Editor, Element as SlateElement, Transforms } from "slate";
 import { useSlate } from "slate-react";
 import { findElement } from "../utils";
+import SuggestionElement from "./elements/SuggestionElement";
+import ContentValueSuggestionElement from "./elements/ContentValueSuggestionElement";
 
 export function Element({
   attributes,
@@ -18,7 +20,6 @@ export function Element({
   element: DeltaElement;
   lastKey: string | undefined;
 }): React.ReactElement {
-  const style = {};
   const editor = useSlate();
 
   useEffect(() => {
@@ -63,37 +64,37 @@ export function Element({
       switch (element.level) {
         case 1:
           return (
-            <h1 style={style} {...attributes} className={"text-5xl"}>
+            <h1 {...attributes} className={"text-5xl"}>
               {children}
             </h1>
           );
         case 2:
           return (
-            <h2 style={style} {...attributes} className={"text-4xl"}>
+            <h2 {...attributes} className={"text-4xl"}>
               {children}
             </h2>
           );
         case 3:
           return (
-            <h3 style={style} {...attributes} className={"text-3xl"}>
+            <h3 {...attributes} className={"text-3xl"}>
               {children}
             </h3>
           );
         case 4:
           return (
-            <h4 style={style} {...attributes} className={"text-2xl"}>
+            <h4 {...attributes} className={"text-2xl"}>
               {children}
             </h4>
           );
         case 5:
           return (
-            <h5 style={style} {...attributes} className={"text-xl"}>
+            <h5 {...attributes} className={"text-xl"}>
               {children}
             </h5>
           );
         default:
           return (
-            <h5 style={style} {...attributes} className={"text-xl"}>
+            <h5 {...attributes} className={"text-xl"}>
               {children}
             </h5>
           );
@@ -101,25 +102,25 @@ export function Element({
     case "list":
       if (element.ordered) {
         return (
-          <ol style={style} {...attributes} className={"list-decimal pl-4"}>
+          <ol {...attributes} className={"list-decimal pl-4"}>
             {children}
           </ol>
         );
       }
       return (
-        <ul style={style} {...attributes} className={"list-disc pl-4"}>
+        <ul {...attributes} className={"list-disc pl-4"}>
           {children}
         </ul>
       );
     case "blockquote":
       return (
-        <blockquote style={style} {...attributes}>
+        <blockquote {...attributes}>
           {children}
         </blockquote>
       );
     case "listItem":
       return (
-        <li style={style} {...attributes}>
+        <li {...attributes}>
           {children}
         </li>
       );
@@ -135,17 +136,30 @@ export function Element({
           {children}
         </ContentValueElement>
       );
+    case "contentValueSuggestion":
+      return (
+        <ContentValueSuggestionElement element={element} attributes={attributes}>
+          {children}
+        </ContentValueSuggestionElement>
+      );
     case "link":
       return (
         <LinkElement element={element} attributes={attributes}>
           {children}
         </LinkElement>
       );
+
+    case "suggestion":
+      return (
+        <SuggestionElement element={element} attributes={attributes}>
+          {children}
+        </SuggestionElement>
+      );
     default:
       return (
-        <p style={style} {...attributes}>
+        <span {...attributes}>
           {children}
-        </p>
+        </span>
       );
   }
 }

package/src/react/components/elements/ContentValueElement.tsx

@@ -21,8 +21,8 @@ export function ContentValueElement({
   };
 
   return (
-    <span className={`${selected ? "bg-[#EAEAFA]" : ""} border border-[#705ED9] py-1 rounded-l-sm`}>
-      <span {...attributes} contentEditable={false} className={`border-[#705ED9] px-2 py-1.5 border-r-3`} style={style}>
+    <span className={`${selected ? "bg-[#EAEAFA]" : ""} inline-flex border-l-5 border-y-1 border-r-1 py-0.5 border-[#705ED9] rounded-sm px-1`}>
+      <span {...attributes} contentEditable={false} style={style}>
         {children}
         {element.root ? toPlaintext(element.root) : ""}
       </span>

package/src/react/components/elements/ContentValueSuggestionElement.tsx

@@ -0,0 +1,31 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { ContentValueSuggestionElement as ContentValueSuggestionElementType } from "../../types";
+import { toPlaintext } from "@platecms/delta-cast-util-to-plaintext";
+
+export function ContentValueSuggestionElement({
+  attributes,
+  children,
+  element,
+}: {
+  attributes: HTMLAttributes<HTMLElement>;
+  children: ReactNode;
+  element: ContentValueSuggestionElementType;
+}): React.ReactElement {
+
+  const style: React.CSSProperties = {
+    fontWeight: element.children[0].bold ? "bold" : "normal",
+    fontStyle: element.children[0].italic ? "italic" : "normal",
+    textDecoration: `${element.children[0].underline ? "underline" : ""} ${element.children[0].strikethrough ? "line-through" : ""}`,
+  };
+
+  return (
+    <span className="inline-flex border-b-3 border-red-500 bg-red-50 px-1 leading-none">
+      <span {...attributes} contentEditable={false} style={style}>
+        {children}
+        {element.root ? toPlaintext(element.root) : ""}
+      </span>
+    </span>
+  );
+}
+
+export default ContentValueSuggestionElement;

package/src/react/components/elements/SuggestionElement.tsx

@@ -0,0 +1,23 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { Suggestion as SuggestionElementType } from "../../types";
+
+export function SuggestionElement({
+  attributes,
+  children,
+  element,
+}: {
+  attributes: HTMLAttributes<HTMLElement>;
+  children: ReactNode;
+  element: SuggestionElementType;
+}): React.ReactElement {
+  return (
+    <span {...attributes} contentEditable={false}>
+      {children}
+      {element.suggested.map((node) => <span>
+          {node.type === 'text' ? node.value : ''}
+        </span>)}
+    </span>
+  );
+}
+
+export default SuggestionElement;

package/src/react/components/toolbar/Toolbar.tsx

@@ -213,7 +213,7 @@ export function Toolbar({ uuid, context }: { uuid: string; context: HTMLElement
       className={"flex w-fit items-start gap-2 absolute z-10 right-0"}
       style={{
         opacity: show ? 1 : 0,
-        zIndex: show ? 10 : -1,
+        zIndex: show ? 9999 : -1,
         left: `${left}px`,
         top: `${top}px`,
         transition: "opacity 0.5s ease-in-out, top 0.1s ease-in-out, left 0.1s ease-in-out, z-index 0.5s ease-in-out",

package/src/react/plugins/index.ts

@@ -14,6 +14,19 @@ export function withContentValues(editor: Editor): Editor {
   return editor;
 }
 
+export function withSuggestions(editor: Editor): Editor {
+  const { isInline, isVoid, markableVoid } = editor;
+
+  editor.isInline = (element): boolean =>
+    ['suggestion', 'contentValueSuggestion'].includes(element.type) ? true : isInline(element);
+
+  editor.isVoid = (element): boolean => (['suggestion', 'contentValueSuggestion'].includes(element.type) ? true : isVoid(element));
+
+  editor.markableVoid = (element): boolean => (['suggestion', 'contentValueSuggestion'].includes(element.type) ? true : markableVoid(element));
+
+  return editor;
+}
+
 export function decorate([node, path]: NodeEntry): Range[] {
   const ranges: Range[] = [];
 

package/src/react/types.ts

@@ -1,6 +1,6 @@
 import { BaseEditor } from "slate";
 import { ReactEditor } from "slate-react";
-import { Root } from "@platecms/delta-cast";
+import { Content, Root } from "@platecms/delta-cast";
 
 declare module "slate" {
   interface CustomTypes {
@@ -15,14 +15,7 @@ export interface DeltaLeafMarkdown {
 }
 
 export type DeltaElement =
-  | BlockquoteElement
-  | CodeElement
-  | ContentValueElement
-  | HeadingElement
-  | LinkElement
-  | ListElement
-  | ListItemElement
-  | ParagraphElement;
+  BlockquoteElement | CodeElement | ContentValueElement | ContentValueSuggestionElement | HeadingElement | LinkElement | ListElement | ListItemElement | ParagraphElement | Suggestion;
 
 export type DeltaLeaf = DeltaLeafMarkdown & {
   text: string;
@@ -36,7 +29,7 @@ export type DeltaLeaf = DeltaLeafMarkdown & {
 
 export interface ParagraphElement {
   type: "paragraph";
-  children: (ContentValueElement | DeltaLeaf | LinkElement)[];
+  children: (ContentValueElement | ContentValueSuggestionElement | DeltaLeaf | LinkElement | Suggestion)[];
 }
 
 export interface HeadingElement {
@@ -73,6 +66,17 @@ export interface ContentValueElement {
   children: DeltaLeaf[];
 }
 
+/*
+ * This is a slate only element that does not exist inside CAST
+ * The element is only used to display a suggestion
+ **/ 
+export interface ContentValueSuggestionElement {
+  type: "contentValueSuggestion";
+  prn: string;
+  root: Root | undefined;
+  children: DeltaLeaf[]; 
+}
+
 export interface LinkElement {
   type: "link";
   url: string;
@@ -85,3 +89,12 @@ export interface LinkElement {
     anchor?: boolean;
   };
 }
+
+export interface Suggestion {
+  type: "suggestion";
+  suggested: Content[];
+  original: Content[];
+  message: string;
+  method: string;
+  children: DeltaLeaf[];
+}

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

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

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

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