Create API methods for manipulating with block elements

package.json

@@ -5,7 +5,7 @@
   ],
   "private": true,
   "scripts": {
-    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/embed --scope @yoopta/action-menu-list --scope @yoopta/toolbar --scope @yoopta/paragraph --scope @yoopta/blockquote --scope @yoopta/headings --parallel --ignore development",
+    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/lists --scope @yoopta/accordion --parallel --ignore development",
     "build": "yarn clean && yarn lerna run build --parallel --ignore development",
     "clean": "find ./packages -type d -name dist ! -path './packages/development/*' -exec rm -rf {} +",
     "serve": "cd ./packages/development && yarn dev",

packages/accordion/README.md

@@ -0,0 +1,11 @@
+# `yoopta-accordion`
+
+> TODO: description
+
+## Usage
+
+```
+const accordion = require('yoopta-accordion');
+
+// TODO: DEMONSTRATE API
+```

packages/accordion/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@yoopta/accordion",
+  "version": "4.0.0",
+  "description": "Accordion plugin for Yoopta Editor",
+  "author": "Darginec05 <[email protected]>",
+  "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/index.js",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "peerDependencies": {
+    "@yoopta/editor": ">=4.0.0-rc.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
+  "dependencies": {
+    "lucide-react": "^0.378.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.yarnpkg.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Darginec05/Editor-Yoopta.git"
+  },
+  "scripts": {
+    "test": "node ./__tests__/yoopta-accordion.test.js",
+    "start": "rollup --config rollup.config.js --watch --bundleConfigAsCjs --environment NODE_ENV:development",
+    "prepublishOnly": "yarn build",
+    "build": "rollup --config rollup.config.js --bundleConfigAsCjs --environment NODE_ENV:production"
+  },
+  "bugs": {
+    "url": "https://github.com/Darginec05/Editor-Yoopta/issues"
+  }
+}

packages/accordion/rollup.config.js

@@ -0,0 +1,7 @@
+import { createRollupConfig } from '../../config/rollup';
+
+const pkg = require('./package.json');
+export default createRollupConfig({
+  pkg,
+  tailwindConfig: { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], prefix: 'yoo-accordion-' },
+});

packages/accordion/src/index.ts

@@ -0,0 +1,12 @@
+import { Accordion } from './plugin';
+import { AccordionItemElement } from './types';
+import './styles.css';
+
+declare module 'slate' {
+  interface CustomTypes {
+    Element: AccordionItemElement;
+  }
+}
+
+export default Accordion;
+export { AccordionItemElement };

packages/accordion/src/plugin/index.tsx

@@ -0,0 +1,52 @@
+import { YooptaPlugin } from '@yoopta/editor';
+import { AccordionElementKeys, AccordionListItemProps } from '../types';
+import { AccordionList } from '../renders/AccordionList';
+import { AccordionItem } from '../renders/AccordionItem';
+import { AccordionItemHeading } from '../renders/AccordionItemHeading';
+import { AccordionItemContent } from '../renders/AccordionItemContent';
+
+const Accordion = new YooptaPlugin<AccordionElementKeys, AccordionListItemProps>({
+  type: 'Accordion',
+  elements: {
+    'accordion-list': {
+      asRoot: true,
+      render: AccordionList,
+      children: ['accordion-list-item'],
+    },
+    'accordion-list-item': {
+      render: AccordionItem,
+      children: ['accordion-list-item-heading', 'accordion-list-item-content'],
+      props: { isExpanded: false },
+    },
+    'accordion-list-item-heading': {
+      render: AccordionItemHeading,
+    },
+    'accordion-list-item-content': {
+      render: AccordionItemContent,
+    },
+  },
+  events: {
+    onKeyDown(editor, slate, { hotkeys, currentBlock }) {
+      return (event) => {
+        if (hotkeys.isEnter(event)) {
+          event.preventDefault();
+
+          editor.blocks.Accordion.createElement(
+            currentBlock.id,
+            'accordion-list-item',
+            { isExpanded: true },
+            { at: 'next', focus: true },
+          );
+        }
+      };
+    },
+  },
+  options: {
+    display: {
+      title: 'Accordion',
+      description: 'Create collapses',
+    },
+  },
+});
+
+export { Accordion };

packages/accordion/src/react-svg.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ReactElement, SVGProps } from 'react';
+
+  const content: (props: SVGProps<SVGElement>) => ReactElement;
+  export default content;
+}

packages/accordion/src/renders/AccordionItem.tsx

@@ -0,0 +1,14 @@
+import { PluginElementRenderProps } from '@yoopta/editor';
+
+export const AccordionItem = (props: PluginElementRenderProps) => {
+  const { element, attributes, children } = props;
+
+  return (
+    <li
+      {...attributes}
+      className="yoo-accordion-border yoo-accordion-border-[#525252] yoo-accordion-bg-[#303030] yoo-accordion-rounded-none yoo-accordion-relative yoo-accordion-w-full"
+    >
+      {children}
+    </li>
+  );
+};

packages/accordion/src/renders/AccordionItemContent.tsx

@@ -0,0 +1,12 @@
+import { PluginElementRenderProps, useYooptaEditor } from '@yoopta/editor';
+import { useEffect, useState } from 'react';
+
+export const AccordionItemContent = (props: PluginElementRenderProps) => {
+  const { element, attributes, children, blockId } = props;
+
+  return (
+    <p {...attributes} className="yoo-accordion-text-white yoo-accordion-px-5 yoo-accordion-py-4">
+      {children}
+    </p>
+  );
+};

packages/accordion/src/renders/AccordionItemHeading.tsx

@@ -0,0 +1,49 @@
+import { PluginElementRenderProps, useYooptaEditor, useYooptaReadOnly } from '@yoopta/editor';
+import { ChevronUp, Plus } from 'lucide-react';
+
+export const AccordionItemHeading = (props: PluginElementRenderProps) => {
+  const { element, attributes, children, blockId } = props;
+  const editor = useYooptaEditor();
+  const isReadOnly = useYooptaReadOnly();
+
+  const onToggleExpand = () => {
+    const listItemEntry = editor.blocks.Accordion.getElement(blockId, 'accordion-list-item');
+
+    if (listItemEntry) {
+      const listItemElement = listItemEntry[0];
+
+      editor.blocks.Accordion.updateElement(blockId, 'accordion-list-item', {
+        isExpanded: !listItemElement.props?.isExpanded,
+      });
+    }
+  };
+
+  const onAddAccordionItem = () => {
+    editor.blocks.Accordion.createElement(
+      blockId,
+      'accordion-list-item',
+      { isExpanded: true },
+      { at: 'next', focus: true },
+    );
+  };
+
+  return (
+    <h2
+      {...attributes}
+      aria-expanded="false"
+      className="yoo-accordion-mb-0 yoo-accordion-group yoo-accordion-relative yoo-accordion-flex yoo-accordion-w-full yoo-accordion-items-center yoo-accordion-border-0 yoo-accordion-rounded-none yoo-accordion-text-[#3b71ca] !yoo-accordion-bg-[#424242] yoo-accordion-px-5 yoo-accordion-py-4 yoo-accordion-text-left"
+    >
+      {children}
+      {!isReadOnly && (
+        <div className="yoo-accordion-absolute yoo-accordion-right-[14px] yoo-accordion-z-10 yoo-accordion-top-1/2 -yoo-accordion-translate-y-1/2 yoo-accordion-flex yoo-accordion-gap-1">
+          <button contentEditable={false} onClick={onAddAccordionItem}>
+            <Plus strokeWidth={1} size={24} color="#fff" />
+          </button>
+          <button contentEditable={false} onClick={onToggleExpand}>
+            <ChevronUp strokeWidth={1} size={24} color="#fff" />
+          </button>
+        </div>
+      )}
+    </h2>
+  );
+};

packages/accordion/src/renders/AccordionList.tsx

@@ -0,0 +1,12 @@
+import { PluginElementRenderProps, useYooptaEditor } from '@yoopta/editor';
+import { useEffect } from 'react';
+
+export const AccordionList = (props: PluginElementRenderProps) => {
+  const { element, attributes, children, blockId } = props;
+
+  return (
+    <ul {...attributes} className="yoo-accordion-p-0 yoo-accordion-m-0 yoo-accordion-my-2">
+      {children}
+    </ul>
+  );
+};

packages/accordion/src/styles.css

@@ -0,0 +1 @@
+@tailwind utilities;

packages/accordion/src/types.ts

@@ -0,0 +1,13 @@
+import { SlateElement } from '@yoopta/editor';
+
+export type AccordionElementKeys =
+  | 'accordion-list'
+  | 'accordion-list-item'
+  | 'accordion-list-item-heading'
+  | 'accordion-list-item-content';
+
+export type AccordionListItemProps = {
+  isExpanded: boolean;
+};
+
+export type AccordionItemElement = SlateElement<'accordion-list-item', AccordionListItemProps>;

packages/accordion/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../config/tsconfig.base.json",
+  "include": ["src/react-svg.d.ts", "css-modules.d.ts", "src"],
+  "exclude": ["dist", "src/**/*.test.tsx", "src/**/*.stories.tsx"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "references": [
+    {
+      "path": "../core"
+    }
+  ]
+}

packages/action-menu/src/components/ActionMenuList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DefaultActionMenuRender } from './DefaultActionMenuRender';
 import {
   useFloating,
@@ -18,7 +18,6 @@ import {
   findSlateBySelectionPath,
   HOTKEYS,
   findPluginBlockBySelectionPath,
-  YooEditor,
 } from '@yoopta/editor';
 import { ActionMenuRenderProps, ActionMenuToolItem, ActionMenuToolProps } from '../types';
 import { buildActionMenuRenderProps, mapActionMenuItems } from './utils';
@@ -39,7 +38,7 @@ const filterActionMenuItems = (block: YooptaBlock, text: string) => {
 };
 
 // [TODO] - add to props
-const trigger = '/';
+const TRIGGER = '/';
 
 const ActionMenuList = ({ items, render }: ActionMenuToolProps) => {
   const editor = useYooptaEditor();
@@ -71,9 +70,9 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => {
   const onClose = () => setIsMenuOpen(false);
 
   const onFilter = ({ text }) => {
-    const string = text.trim().replace(trigger, '');
+    const string = text.trim().replace(TRIGGER, '');
 
-    if (string.length === 0 || string === trigger) return setActions(blockTypes);
+    if (string.length === 0 || string === TRIGGER) return setActions(blockTypes);
     const filteredActions = actions.filter((action) => filterActionMenuItems(editor.blocks[action.type], string));
     const isSelectedItemInsideFilteredActions = filteredActions.some((item) => item.type === selectedAction.type);
     if (filteredActions.length > 0 && !isSelectedItemInsideFilteredActions) setSelectedAction(filteredActions[0]);