@use-kona/editor 0.1.0-rc.0

package/src/examples/icons/bold.tsx

@@ -0,0 +1,20 @@
+import { IconProps } from './types';
+
+export const BoldIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-bold"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
+    <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+  </svg>
+);

package/src/examples/icons/check.tsx

@@ -0,0 +1,19 @@
+import { IconProps } from './types';
+
+export const CheckIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-check"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 12l5 5l10 -10" />
+  </svg>
+);

package/src/examples/icons/chevronRight.tsx

@@ -0,0 +1,19 @@
+import type { IconProps } from './types';
+
+export const ChevronRightIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 6l6 6l-6 6" />
+  </svg>
+);

package/src/examples/icons/color.tsx

@@ -0,0 +1,23 @@
+import { IconProps } from './types';
+
+export const ColorIcon = ({ size }: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="icon icon-tabler icons-tabler-outline icon-tabler-paint"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
+      <path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2" />
+      <path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" />
+    </svg>
+  );
+};

package/src/examples/icons/copy.tsx

@@ -0,0 +1,20 @@
+import { IconProps } from './types';
+
+export const CopyIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-copy"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
+    <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+  </svg>
+);

package/src/examples/icons/cross.tsx

@@ -0,0 +1,20 @@
+import { IconProps } from './types';
+
+export const CrossIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-x"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M18 6l-12 12" />
+    <path d="M6 6l12 12" />
+  </svg>
+);

package/src/examples/icons/drag.tsx

@@ -0,0 +1,24 @@
+import { IconProps } from './types';
+
+export const DragIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-grip-vertical"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+    <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+  </svg>
+);

package/src/examples/icons/edit.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const EditIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-edit"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+    <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+    <path d="M16 5l3 3" />
+  </svg>
+);

package/src/examples/icons/external.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const ExternalIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-external-link"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" />
+    <path d="M11 13l9 -9" />
+    <path d="M15 4h5v5" />
+  </svg>
+);

package/src/examples/icons/heading1.tsx

@@ -0,0 +1,26 @@
+import { IconProps } from './types';
+
+export const Heading1Icon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-h-1"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M19 18v-8l-2 2" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+  </svg>
+);

package/src/examples/icons/heading2.tsx

@@ -0,0 +1,26 @@
+import { IconProps } from './types';
+
+export const Heading2Icon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-h-2"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+  </svg>
+);

package/src/examples/icons/heading3.tsx

@@ -0,0 +1,27 @@
+import { IconProps } from './types';
+
+export const Heading3Icon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-h-3"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M19 14a2 2 0 1 0 -2 -2" />
+    <path d="M17 16a2 2 0 1 0 2 -2" />
+    <path d="M4 6v12" />
+    <path d="M12 6v12" />
+    <path d="M11 18h2" />
+    <path d="M3 18h2" />
+    <path d="M4 12h8" />
+    <path d="M3 6h2" />
+    <path d="M11 6h2" />
+  </svg>
+);

package/src/examples/icons/italic.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const ItalicIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-italic"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M11 5l6 0" />
+    <path d="M7 19l6 0" />
+    <path d="M14 5l-4 14" />
+  </svg>
+);

package/src/examples/icons/link.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from './types';
+
+export const LinkIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-link"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 15l6 -6" />
+    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+    <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
+  </svg>
+);

package/src/examples/icons/ol.tsx

@@ -0,0 +1,23 @@
+import type { IconProps } from './types';
+
+export const OlIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-list-numbers"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M11 6h9" />
+    <path d="M11 12h9" />
+    <path d="M12 18h8" />
+    <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
+    <path d="M6 10v-6l-2 2" />
+  </svg>
+);

package/src/examples/icons/strikethrough.tsx

@@ -0,0 +1,20 @@
+import { IconProps } from './types';
+
+export const StrikethroughIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-strikethrough"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 12l14 0" />
+    <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />
+  </svg>
+);

package/src/examples/icons/text.tsx

@@ -0,0 +1,18 @@
+import type { IconProps } from './types';
+
+export const TextIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={1.25}
+    viewBox="0 0 24 24"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <path d="M4 6h16M4 12h10M4 18h14" />
+  </svg>
+);

package/src/examples/icons/types.ts

@@ -0,0 +1,3 @@
+export type IconProps = {
+  size?: number;
+};

package/src/examples/icons/ul.tsx

@@ -0,0 +1,24 @@
+import { IconProps } from './types';
+
+export const UlIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-list"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 6l11 0" />
+    <path d="M9 12l11 0" />
+    <path d="M9 18l11 0" />
+    <path d="M5 6l0 .01" />
+    <path d="M5 12l0 .01" />
+    <path d="M5 18l0 .01" />
+  </svg>
+);

package/src/examples/icons/underline.tsx

@@ -0,0 +1,20 @@
+import { IconProps } from './types';
+
+export const UnderlineIcon = ({ size }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="icon icon-tabler icons-tabler-outline icon-tabler-underline"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 5v5a5 5 0 0 0 10 0v-5" />
+    <path d="M5 19h14" />
+  </svg>
+);

package/src/examples/store.ts

@@ -0,0 +1,14 @@
+import { map } from 'nanostores';
+
+type FloatingMenuMode = 'main' | 'link' | 'colors';
+
+type Store = {
+  isFloatingMenuOpen: boolean;
+  floatingMenuMode: FloatingMenuMode;
+  url?: string;
+};
+
+export const $store = map<Store>({
+  isFloatingMenuOpen: false,
+  floatingMenuMode: 'main',
+});

package/src/examples/styles.module.css

@@ -0,0 +1,77 @@
+body {
+  --background-color: #fff;
+  --kona-editor-background-color: #fff;
+  --text-color: #444;
+  --kona-editor-text-color: #444;
+  --border-color: #ddd;
+  --kona-editor-border-color: #ddd;
+}
+
+:global(body.dark-theme) {
+  background-color: #222;
+  color: #eee;
+  --background-color: #222;
+  --text-color: #eee;
+  --border-color: #000;
+}
+
+.root {
+  width: 600px;
+  height: calc(100vh - 128px * 2);
+  overflow: hidden;
+  max-height: 100vh;
+  margin: 32px auto;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+
+  [role="textbox"] {
+    outline: none;
+  }
+}
+
+.menu {
+  padding: 8px;
+  display: flex;
+  column-gap: 4px;
+}
+
+.button {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  background-color: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  transition: background-color 0.25s;
+}
+
+.button.active {
+  background-color: #eee;
+}
+
+.divider {
+  display: inline-block;
+  background-color: #ccc;
+  width: 1px;
+  height: 24px;
+}
+
+.floating {
+  height: 24px;
+}
+
+.hint {
+  background-color: #fff;
+  color: #444;
+  padding: 2px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
+}

package/src/examples/text.tsx

@@ -0,0 +1,133 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import {
+  createHyperscript,
+  createText,
+  type HyperscriptShorthands,
+} from 'slate-hyperscript';
+import {
+  CodeBlockPlugin,
+  HeadingsPlugin,
+  LinksPlugin,
+  ListsPlugin,
+} from '../plugins';
+
+const elements: HyperscriptShorthands = {
+  paragraph: { type: 'paragraph' },
+  heading1: { type: HeadingsPlugin.HeadingLevel1 },
+  heading2: { type: HeadingsPlugin.HeadingLevel2 },
+  heading3: { type: HeadingsPlugin.HeadingLevel3 },
+  numberedList: { type: ListsPlugin.NUMBERED_LIST_ELEMENT },
+  bulletedList: { type: ListsPlugin.BULLETED_LIST_ELEMENT },
+  listItem: { type: ListsPlugin.LIST_ITEM_ELEMENT },
+  codeBlock: { type: CodeBlockPlugin.CODE_ELEMENT },
+  codeBlockLine: { type: CodeBlockPlugin.CODE_LINE_ELEMENT },
+  hlink: { type: LinksPlugin.LINK_TYPE },
+};
+
+const creators = {
+  htext: createText,
+};
+
+const jsx = createHyperscript({ elements, creators });
+
+export const text = (
+  <fragment>
+    <heading1>About</heading1>
+    <paragraph>
+      <htext bold italic>
+        Kona Editor
+      </htext>{' '}
+      is a text editor based on Slate.js that I use in{' '}
+      <hlink url="https://kona.to">Kona application</hlink> for notes and event
+      descriptions. I decided to open-source the editor for a few reasons:
+    </paragraph>
+    <numberedList>
+      <listItem>
+        I had a lot of <htext strikethrough>difficulties</htext> fun while
+        building this editor and there were always not enough examples of how to
+        do it right. I wanted to make a little contribution to the community, so
+        others could use my code as a reference.
+      </listItem>
+      <listItem>
+        I have always wanted to try to build something open-sourced, but there
+        have not been enough good ideas on what to build. I think that an editor
+        is a pretty decent starting point.
+      </listItem>
+    </numberedList>
+    <heading2>Usage</heading2>
+    <codeBlock language="tsx">
+      <codeBlockLine>{`import { KonaEditor } from '@use-kona/editor';`}</codeBlockLine>
+      <codeBlockLine> </codeBlockLine>
+      <codeBlockLine>{`const App = () => {`}</codeBlockLine>
+      <codeBlockLine>{`  return (`}</codeBlockLine>
+      <codeBlockLine>{`    <KonaEditor`}</codeBlockLine>
+      <codeBlockLine>{`      initialValue={initialValue}`}</codeBlockLine>
+      <codeBlockLine>{`      plugins={plugins}`}</codeBlockLine>
+      <codeBlockLine>{`      onChange={handleChange}`}</codeBlockLine>
+      <codeBlockLine>{`     />`}</codeBlockLine>
+      <codeBlockLine>{`  )`}</codeBlockLine>
+      <codeBlockLine>{`}`}</codeBlockLine>
+    </codeBlock>
+    <paragraph>
+      Defining the list of plugins might be a little tricky, but I've tried to
+      cover everything you'll need in docs.
+    </paragraph>
+    <heading2>List of plugins</heading2>
+    <heading3>BasicFormattingPlugin</heading3>
+    <paragraph>
+      Allows to use <htext bold>bold</htext>, <htext italic>italic</htext>,{' '}
+      <htext underline>underlined</htext> and{' '}
+      <htext strikethrough>strikethrough</htext> text
+    </paragraph>
+
+    <heading3>BreaksPlugin</heading3>
+    <paragraph>
+      Overrides default Slate behavior by breaking custom block types when user
+      presses Enter.
+    </paragraph>
+
+    <heading3>CodeBlockPlugin</heading3>
+    <paragraph>Adds support for code blocks.</paragraph>
+
+    <heading3>CommandsPlugin</heading3>
+    <paragraph>Adds Notion-style menu with custom list of commands</paragraph>
+
+    <heading3>DnDPlugin</heading3>
+    <paragraph>Allows reordering blocks by drag'n'dropping them</paragraph>
+
+    <heading3>FloatingMenuPlugin</heading3>
+    <paragraph>Adds menu which is shown when user selects a text</paragraph>
+
+    <heading3>HeadingsPlugin</heading3>
+    <paragraph>Adds three levels of headings</paragraph>
+
+    <heading3>HighlightsPlugin</heading3>
+    <paragraph>Allows highlighting selected text with a custom color</paragraph>
+
+    <heading3>LinksPlugin</heading3>
+    <paragraph>
+      Gives user ability to convert the selected text into a link
+    </paragraph>
+
+    <heading3>MenuPlugin</heading3>
+    <paragraph>Adds pinned to the top menu with custom commands</paragraph>
+
+    <heading3>NodeIdPlugin</heading3>
+    <paragraph>Assigns a unique id to each block</paragraph>
+
+    <heading3>PlaceholderPlugin</heading3>
+    <paragraph>
+      Allows to setup a custom placeholder for the selected line
+    </paragraph>
+
+    <heading3>ShortcutsPlugin</heading3>
+    <paragraph>
+      Converts some popular markdown shortcuts to a custom node
+    </paragraph>
+
+    <heading3>TableOfContentsPlugin</heading3>
+    <paragraph>Shows a quick map of headings inside the document</paragraph>
+  </fragment>
+);