@layers-app/editor 0.0.1 → 0.0.2

package/README.md

@@ -1,21 +1,39 @@
-# Editor
+# LayersTextEditor
 
+LayersTextEditor is a text editor for web applications written in JavaScript, with a focus on reliability, accessibility, and performance.
 
-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.
+<details>
+  <summary>
+    🚀 Quick Start
+  </summary>
 
+## Installation
 
-## Quick Start
+To install the package, run one of the following commands:
 
+### Use npm:
 
-```js
-import { Editor } from '@layers-app/editor';
+```bash
+npm install @layers-app/editor
+```
+
+### Use yarn:
 
-Initialize the text editor.
+```bash
+yarn add @layers-app/editor
+```
 
-By default, Editor works with an object and can return either an object or HTML.
+### Initializing the text editor
+
+```
+import { Editor } from '@layers-app/editor';
+```
+
+By default, LayersTextEditor works with an object and can return either an object or HTML.
 
 Example with an object:
 
+```js
 const text = 'Hello world';
 
 const json = {
@@ -51,11 +69,13 @@ const json = {
 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>
@@ -74,9 +94,11 @@ const html = `
 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:
+The output of the data in the `onChange` function is controlled by the **outputFormat** property. **outputFormat** can be either "html" or "json". 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>
@@ -95,246 +117,249 @@ const html = `
 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>
+</details>
 
-Image Upload
+<details>
+  <summary>
+    🎨 StylesProvider
+  </summary>
 
-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.
+Use **StylesProvider** to add styling to your HTML content.
 
-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;
+```
+  <StylesProvider>
+      <div
+        dangerouslySetInnerHTML={{ __html: '<p>Your html here</p>' }}
+      />
+    </StylesProvider>
+```
+
+</details>
+
+<details>
+  <summary>
+    🖼️ Image upload
+  </summary>
+
+## Image upload
+
+To start working with image uploads, use the **fetchUploadImage** function, which takes three parameters: **file**, **success**, and **error**. After successfully uploading the image to your service, you should call the **success** function and pass two required arguments: the **URL** of the image and its **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');
+      }
 
-    success(Url, Id);
-  } catch (err) {
-    if (error) {
-      if (err instanceof Error) {
-        error(err);
-      } else {
-        error(new Error('An unknown error occurred'));
+      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}
+  ...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'));
+```
+
+## Image Deletion
+
+To have greater control over image deletion, pass an optional function **fetchDeleteImage** to the editor, which accepts three parameters: **id**, **success**, and **error**. After successfully deleting the image from your service, the **success** function should be called.
+
+```
+  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}
+  ...props
+   fetchUploadImage={fetchUploadImage}
+   fetchDeleteImage={fetchUploadImage}
 />
+```
 
-Additional Options for Image Upload
+## Additional options for working with image uploads.
 
-import { Editor, Dropzone } from "@layers-app/editor";
+```
+import { Editor, Dropzone } from "@sinups/editor-dsd";
 
 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>
-);
+      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+           {/*
+      The components Dropzone.Accept, Dropzone.Reject, and Dropzone.Idle are visible only when the user performs specific actions:
+
+Dropzone.Accept is visible only when the user drags a file that can be accepted into the drop zone.
+Dropzone.Reject is visible only when the user drags a file that cannot be accepted into the drop zone.
+Dropzone.Idle is visible when the user is not dragging any file into the drop zone.
+          */}
+            <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 want, each file must not exceed{' '}                {maxImageSize} МБ.
+              </Text>
+            </div>
+          </Group>
+  );
 
 <Editor
-  {...props}
-  fetchUploadImage={fetchUploadImage}
-  contentModalUploadImage={Content}
-  maxImageSize={5}
-  maxImageSizeError={() => {}}
+  ...props
+   fetchUploadImage={fetchUploadImage}
+   contentModalUploadImage={Content}
+   maxImageSize={5}
+   maxImageSizeError={() => {}}
 />
+```
+
+</details>
 
-Collaboration
+<details>
+  <summary>
+    👥 Collaboration
+  </summary>
 
+```jsx
 <Editor
   {...props}
   ws={{
-    url: 'https://wss.dudoc.io/', // Websocket URL
+    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
+      // Returns active users editing the document
       setActiveUsers(users);
     }
   }}
 />
+```
 
-Reset Editor Content
+</details>
 
-import { CLEAR_EDITOR_COMMAND } from './EditorLexical';
+<details>
+  <summary>
+    📝 Additional options
+  </summary>
+  
+## 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.
+   <button
+      onClick={() => {
+        if (editorRef.current) {
+          editorRef.current.update(() => {
+            editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+          });
+        }
+      }}
+    >
+      Reset
+    </button>
+    <Editor
+    ...props
+     editorRef={editorRef}
+    />
+<>
+```
+
+</details>
+<details>
+  <summary>
+    ⚙️ Properties
+  </summary>
+
+```
+onChange: (value: string | object) => undefined - A function that triggers every time the editor content changes and returns an HTML string or an object depending on the outputFormat property.
+debounce?: number - Defines how often the onChange function is called, in milliseconds.
+onBlur: (value: string | object) => undefined - A function that triggers when the editor loses focus and returns an HTML string or an object depending on the outputFormat property.
+outputFormat?: 'html' | 'json' - The outputFormat property defines whether we want to output an HTML string or a JSON object. The default is JSON.
+initialContent: string | object - The initial content for the editor.
+maxHeight?: number - Sets the height of the editor. The default is 100%.
+mode?: 'simple' | 'default' | 'full' | 'editor' - The editor mode. Depending on the chosen mode, functionality may be restricted or extended. The default is default.
+fetchUploadImage?: (file: File, success: (url: string, id: string, error?: (error?: Error) => void) => void) - Function to upload an image to your service.
+fetchDeleteImage?: (id: string, success: () => void, error?: (error?: Error) => void) - Helper function to delete an image.
+maxImageSize?: number - The maximum image size in megabytes.
+contentModalUploadImage?: React.FunctionComponent - A React component to replace content in DropZone.
+maxImageSizeError?: () => void - A function that is called if the image exceeds the maxImageSize.
+disable?: boolean - Toggles the editor into read-only mode.
+ws?: { url: string, id: string, user: { color: string, name: string }, getActiveUsers: (users) => void } - WebSocket settings: URL, document ID, current user details, and function to return active users editing the document.
+editorRef?: { current: EditorType | null } - Reference to the editor.
+```
+
+</details>