@layers-app/editor 0.0.1

package/README.md

@@ -0,0 +1,340 @@
+# Editor
+
+
+Editor is a JavaScript text editor for web applications with a focus on reliability, accessibility, and performance. Editor aims to provide an optimal developer experience so that you can easily prototype and implement features with confidence. Combined with a highly extensible architecture, Editor allows developers to create unique text editors that can scale in both size and functionality.
+
+
+## Quick Start
+
+
+```js
+import { Editor } from '@layers-app/editor';
+
+Initialize the text editor.
+
+By default, Editor works with an object and can return either an object or HTML.
+
+Example with an object:
+
+const text = 'Hello world';
+
+const json = {
+  root: {
+    children: [
+      {
+        children: [
+          {
+            detail: 0,
+            format: 0,
+            mode: 'normal',
+            style: '',
+            text: text,
+            type: 'text',
+            version: 1
+          }
+        ],
+        direction: 'ltr',
+        format: '',
+        indent: 0,
+        type: 'paragraph',
+        version: 1
+      }
+    ],
+    direction: 'ltr',
+    format: '',
+    indent: 0,
+    type: 'root',
+    version: 1
+  }
+};
+
+const onChange = (
+  data // json
+) => <Editor initialContent={json} onChange={onChange} />;
+
+You can also pass an HTML string to the editor.
+
+Example with HTML:
+
+const html = `
+<h2 dir="ltr" style="text-align: left;">
+   <span style="background-color: rgb(248, 231, 28); font-family: &quot;Trebuchet MS&quot;; white-space: pre-wrap;">Hello</span>
+</h2>
+<h2 dir="ltr">
+   <br>
+</h2>
+<p dir="ltr">
+   <br>
+</p>
+<p dir="ltr">
+   <span style="font-size: 21px; white-space: pre-wrap;">world</span>
+</p>
+`
+
+const onChange = (data) => // json
+
+<Editor initialContent={html} onChange={onChange} />
+
+The outputFormat property controls how the onChange function outputs data. outputFormat can be either "html" or "json". An example with outputFormat:
+
+const html = `
+<h2 dir="ltr" style="text-align: left;">
+   <span style="background-color: rgb(248, 231, 28); font-family: &quot;Trebuchet MS&quot;; white-space: pre-wrap;">Hello</span>
+</h2>
+<h2 dir="ltr">
+   <br>
+</h2>
+<p dir="ltr">
+   <br>
+</p>
+<p dir="ltr">
+   <span style="font-size: 21px; white-space: pre-wrap;">world</span>
+</p>
+`
+
+const onChange = (data) => // html
+
+<Editor initialContent={html} outputFormat="html" onChange={onChange} />
+
+DocSpaceStylesProvider
+
+Use DocSpaceStylesProvider to add styling to your HTML content:
+
+<DocSpaceStylesProvider>
+  <div
+    dangerouslySetInnerHTML={{ __html: '<p>Your html here</p>' }}
+  />
+</DocSpaceStylesProvider>
+
+Image Upload
+
+To work with image uploads, use the fetchUploadImage function, which takes three parameters: file, success, and error. After your images have been successfully uploaded to your service, you need to call the success function and pass two required arguments: the image URL and ID.
+
+const fetchUploadImage = async (
+  file: File,
+  success: (url: string, id: string) => void,
+  error?: (error?: Error) => void
+) => {
+  const formData = new FormData();
+  formData.append('File', file);
+  formData.append('FileAccessModifier', '0');
+
+  try {
+    const response = await fetch('/api/v1/Files/Upload', {
+      method: 'POST',
+      body: formData,
+      credentials: 'include'
+    });
+
+    if (!response.ok) {
+      throw new Error('File upload failed');
+    }
+
+    const data = await response.json();
+    const { Id, Url } = data;
+
+    success(Url, Id);
+  } catch (err) {
+    if (error) {
+      if (err instanceof Error) {
+        error(err);
+      } else {
+        error(new Error('An unknown error occurred'));
+      }
+    }
+  }
+};
+
+<Editor
+  {...props}
+  fetchUploadImage={fetchUploadImage}
+/>
+
+Image Deletion
+
+For greater control over image deletion, pass an optional fetchDeleteImage function to the editor. It takes three parameters: id, success, and error. After the image is successfully removed from your service, call the success function.
+
+const fetchDeleteImage = async (
+  id: string,
+  success: () => void,
+  error?: (error?: Error) => void
+) => {
+  const body = { Ids: [id] };
+
+  try {
+    const response = await fetch('/api/v1/Documents/Delete', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(body),
+      credentials: 'include'
+    });
+
+    await response.json();
+    success();
+  } catch (err) {
+    if (error) {
+      if (err instanceof Error) {
+        error(err);
+      } else {
+        error(new Error('An unknown error occurred'));
+      }
+    }
+  }
+};
+
+<Editor
+  {...props}
+  fetchUploadImage={fetchUploadImage}
+  fetchDeleteImage={fetchDeleteImage}
+/>
+
+Additional Options for Image Upload
+
+import { Editor, Dropzone } from "@layers-app/editor";
+
+const Content = () => (
+  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+    {/*
+      Dropzone.Accept, Dropzone.Reject, and Dropzone.Idle components are only visible
+      when the user performs a specific action:
+
+      Dropzone.Accept is displayed only when a file that can be accepted is dragged over the dropzone.
+      Dropzone.Reject is displayed only when a file that cannot be accepted is dragged over the dropzone.
+      Dropzone.Idle is visible when the user is not dragging anything over the dropzone.
+    */}
+    <Dropzone.Accept>
+      <IconUpload
+        style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
+        stroke={1.5}
+      />
+    </Dropzone.Accept>
+    <Dropzone.Reject>
+      <IconX
+        style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
+        stroke={1.5}
+      />
+    </Dropzone.Reject>
+    <Dropzone.Idle>
+      <IconPhoto
+        style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
+        stroke={1.5}
+      />
+    </Dropzone.Idle>
+
+    <div>
+      <Text size="xl" inline>
+        Drag images here or click to select files
+      </Text>
+      <Text size="sm" c="dimmed" inline mt={7}>
+        Attach as many files as you like. Each file must not exceed {' '}
+        {maxImageSize} MB.
+      </Text>
+    </div>
+  </Group>
+);
+
+<Editor
+  {...props}
+  fetchUploadImage={fetchUploadImage}
+  contentModalUploadImage={Content}
+  maxImageSize={5}
+  maxImageSizeError={() => {}}
+/>
+
+Collaboration
+
+<Editor
+  {...props}
+  ws={{
+    url: 'https://wss.dudoc.io/', // Websocket URL
+    id: '322323', // Unique document ID
+    user: userProfile, // Current user
+    getActiveUsers: (users) => {
+      // Returns the users actively editing the document
+      setActiveUsers(users);
+    }
+  }}
+/>
+
+Reset Editor Content
+
+import { CLEAR_EDITOR_COMMAND } from './EditorLexical';
+
+<>
+  <button
+    onClick={() => {
+      if (editorRef.current) {
+        editorRef.current.update(() => {
+          editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+        });
+      }
+    }}
+  >
+    Reset
+  </button>
+  <Editor
+    {...props}
+    editorRef={editorRef}
+  />
+</>
+
+Properties
+
+onChange: (value: string | object) => void 
+// Fires whenever the editor changes, returning an HTML string or an object, depending on outputFormat.
+
+debounce?: number 
+// Controls how often the onChange function is called, in milliseconds.
+
+onBlur: (value: string | object) => void 
+// Fires when the editor loses focus, returning an HTML string or an object, depending on outputFormat.
+
+outputFormat?: 'html' | 'json' 
+// Determines if onChange returns HTML or JSON. Default is JSON.
+
+initialContent: string | object 
+// The initial data for the editor.
+
+maxHeight?: number 
+// Sets the height of the editor. Default is 100%.
+
+mode?: 'simple' | 'default' | 'full' | 'editor' 
+// The editor mode, which can restrict or add functionality. Default is 'default'.
+
+fetchUploadImage?: (
+  file: File,
+  success: (url: string, id: string),
+  error?: (error?: Error) => void
+) => void 
+// Function to upload images to your service.
+
+fetchDeleteImage?: (
+  id: string,
+  success: () => void,
+  error?: (error?: Error) => void
+) => void 
+// Helper function to delete images.
+
+maxImageSize?: number 
+// Maximum image size in MB.
+
+contentModalUploadImage?: React.FunctionComponent 
+// React component to replace the DropZone content.
+
+maxImageSizeError?: () => void 
+// Function called when the image exceeds maxImageSize.
+
+disable?: boolean 
+// Toggles read-only mode.
+
+ws?: {
+  url: string, // Websocket URL
+  id: string, // Unique document ID
+  user: { color: string; name: string }, // Current user
+  getActiveUsers: (users) => void // Returns the users actively editing the document
+}
+
+editorRef?: { current: EditorType | null } 
+// Reference to the editor.