Merge pull request #8 from guardian/rm/enable-disable

guardian · Nov 15, 2023 · daf6fd7 · daf6fd7
2 parents 1b3d849 + bdbe9bb
commit daf6fd7
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/.changeset/wicked-rings-tease.md b/.changeset/wicked-rings-tease.md
@@ -0,0 +1,5 @@
+---
+"@guardian/prosemirror-editor": minor
+---
+
+Add option to disable editors
diff --git a/src/css/index.css b/src/css/index.css
@@ -10,6 +10,10 @@
     padding: 10px;
 }
 
+.ProseMirror[contenteditable="false"]{
+    background-color: #f6f6f6;
+    cursor: not-allowed
+}
 
 .ProseMirror p {
     margin: 0px

diff --git a/src/ts/RichTextEditor.tsx b/src/ts/RichTextEditor.tsx
@@ -13,9 +13,10 @@ interface RichTextEditorProps {
   config: EditorConfig;
   label?: string;
   shouldAcceptCopiedText?: boolean;
+  disabled: boolean;
 }
 
-export const RichTextEditor = ({ value, onUpdate, config, label, shouldAcceptCopiedText = false }: RichTextEditorProps) => {
+export const RichTextEditor = ({ value, onUpdate, config, label, shouldAcceptCopiedText = false, disabled = false }: RichTextEditorProps) => {
   const schema = createSchema(config);
 
   const editorEl = useRef<HTMLDivElement>(null);
@@ -33,7 +34,7 @@ export const RichTextEditor = ({ value, onUpdate, config, label, shouldAcceptCop
     // Editor view takes an HTML Node therefore this string value needs to be converted into a node by placing in a div
     const contentNode = document.createElement('div');
     contentNode.innerHTML = value;
-    const edView = createEditorView(localOnUpdate, editorEl, contentNode, schema, config);
+    const edView = createEditorView(localOnUpdate, editorEl, contentNode, schema, config, disabled);
     setEditorView(edView);
   }, []);
 

diff --git a/src/ts/richtext/setup.ts b/src/ts/richtext/setup.ts
@@ -10,22 +10,23 @@ import { buildMenuItems } from './menu';
 import { baseKeymap } from 'prosemirror-commands';
 import { EditorConfig } from './config';
 
-const createBasePlugins = (schema: Schema, config: EditorConfig) => {
+const createBasePlugins = (schema: Schema, config: EditorConfig, disabled: boolean) => {
   const plugins = [
     keymap(buildKeymap(schema, {}, {}, config)),
     keymap(baseKeymap),
     history({ depth: 100, newGroupDelay: 500 }),
     menuBar({content: buildMenuItems(schema)})
   ];
-  return plugins;
+  return disabled ? [] : plugins;
 };
 
 export const createEditorView = (
   onChange: (str: string) => void,
   editorEl: RefObject<HTMLDivElement>,
   contentEl: HTMLDivElement,
   schema: Schema,
-  config: EditorConfig
+  config: EditorConfig,
+  disabled: boolean
 ) => {
   if (!editorEl.current) {
     return;
@@ -35,7 +36,7 @@ export const createEditorView = (
       doc: DOMParser.fromSchema(schema).parse(contentEl, {
         preserveWhitespace: true
       }),
-      plugins: createBasePlugins(schema, config)
+      plugins: createBasePlugins(schema, config, disabled)
     }),
     dispatchTransaction: (transaction: Transaction) => {
       const { state, transactions } = ed.state.applyTransaction(transaction);
@@ -49,7 +50,10 @@ export const createEditorView = (
         tmp.appendChild(outputHtml);
         onChange(tmp.innerHTML);
       }
-    }
+    },
+    editable: () => {
+      return !disabled;
+    },
   });
   return ed;
 };