wip: docs

Author: eden-lane

apps/site/docs/guide/plugins/_meta.json

@@ -4,5 +4,7 @@
   "code-block-plugin/index",
   "commands-plugin/index",
   "dnd-plugin/index",
-  "floating-menu-plugin/index"
+  "floating-menu-plugin/index",
+  "headings-plugin/index",
+  "highlights-plugin/index"
 ]

apps/site/docs/guide/plugins/headings-plugin/index.mdx

@@ -0,0 +1,37 @@
+---
+title: HeadingsPlugin
+---
+
+## Description
+
+Adds three levels of headings to the editor.
+
+
+## Usage
+### Example
+```tsx
+import { KonaEditor, HeadingsPlugin } from "@kona/editor";
+
+const headingsPlugin = new HeadingsPlugin();
+
+return (
+  <KonaEditor
+    plugins={[headingsPlugin]}
+  />
+)
+```
+
+## Static methods
+You can check if a heading is active or toggle it with static methods of this plugin
+
+### `HeadingsPlugin.isHeading1Active()`
+### `HeadingsPlugin.isHeading2Active()`
+### `HeadingsPlugin.isHeading3Active()`
+
+Checks if the current node is a heading of this level.
+
+### `HeadingsPlugin.toggleHeading1()`
+### `HeadingsPlugin.toggleHeading2()`
+### `HeadingsPlugin.toggleHeading3()`
+
+Converts the current node to the heading of this level.

apps/site/docs/guide/plugins/highlights-plugin/index.mdx

@@ -0,0 +1,46 @@
+---
+title: HighlightsPlugin
+---
+
+## Description
+
+Allows highlighting the text with a set of pre-defined colors;
+
+
+## Usage
+### Example
+```tsx
+import { KonaEditor, HighlightsPlugin } from "@kona/editor";
+
+export enum Color {
+  Red = 'red',
+  Blue = 'blue',
+  Yellow = 'yellow',
+}
+
+export const colors = {
+  [Color.Red]: '#ff000055',
+  [Color.Blue]: '#0000ff55',
+  [Color.Yellow]: '#ffff0055',
+};
+
+
+const highlightsPlugin = new HighlightsPlugin({
+  color,
+});
+
+return (
+  <KonaEditor
+    plugins={[highlightsPlugin]}
+  />
+)
+```
+
+## Static methods
+
+
+### `HighlightsPlugin.isHighlightActive(editor, color)`
+Returns true if the currently selected text is highlighted with this particular color.
+
+### `HighlightsPlugin.toggleHighlight(editor, color)`
+Highlights the selected text with this color.

apps/site/rspress.config.ts

@@ -57,6 +57,14 @@ export default defineConfig({
             {
               text: 'FloatingMenuPlugin',
               link: '/guide/plugins/floating-menu-plugin',
+            },
+            {
+              text: 'HeadingsPlugin',
+              link: '/guide/plugins/headings-plugin',
+            },
+            {
+              text: 'HighlightsPlugin',
+              link: '/guide/plugins/highlights-plugin',
             }
           ]
         }

packages/editor/src/plugins/HeadingsPlugin/HeadingsPlugin.tsx

@@ -1,6 +1,6 @@
-import { IPlugin } from '../../types';
-import { RenderElementProps } from 'slate-react';
 import { Editor, Element, Transforms } from 'slate';
+import { RenderElementProps } from 'slate-react';
+import { IPlugin } from '../../types';
 
 export class HeadingsPlugin implements IPlugin {
   static HeadingLevel1 = 'h1';
@@ -46,15 +46,15 @@ export class HeadingsPlugin implements IPlugin {
   }
 
   static toggleHeading1(editor: Editor) {
-    this.toggleHeading(editor, HeadingsPlugin.HeadingLevel1);
+    HeadingsPlugin.toggleHeading(editor, HeadingsPlugin.HeadingLevel1);
   }
 
   static toggleHeading2(editor: Editor) {
-    this.toggleHeading(editor, HeadingsPlugin.HeadingLevel2);
+    HeadingsPlugin.toggleHeading(editor, HeadingsPlugin.HeadingLevel2);
   }
 
   static toggleHeading3(editor: Editor) {
-    this.toggleHeading(editor, HeadingsPlugin.HeadingLevel3);
+    HeadingsPlugin.toggleHeading(editor, HeadingsPlugin.HeadingLevel3);
   }
 }
 
@@ -66,7 +66,8 @@ const isBlockActive = (editor, type) => {
   const [match] = Array.from(
     Editor.nodes(editor, {
       at: Editor.unhangRange(editor, selection),
-      match: (node) => !Editor.isEditor(node) && Element.isElement(node) && node.type === type,
+      match: (node) =>
+        !Editor.isEditor(node) && Element.isElement(node) && node.type === type,
     }),
   );