@yoopta/divider 4.7.1-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,62 @@
1
+ # Divider plugin
2
+
3
+ Divider is default plugin for Yoopta-Editor
4
+
5
+ ### Installation
6
+
7
+ ```bash
8
+ yarn add @yoopta/divider
9
+ ```
10
+
11
+ ### Usage
12
+
13
+ ```jsx
14
+ import Divider from '@yoopta/divider';
15
+
16
+ const plugins = [Divider];
17
+
18
+ const Editor = () => {
19
+ return <YooptaEditor plugins={plugins} />;
20
+ };
21
+ ```
22
+
23
+ ### Default classnames
24
+
25
+ - .yoopta-divider
26
+
27
+ ### Default options
28
+
29
+ ```js
30
+ const Divider = new YooptaPlugin({
31
+ options: {
32
+ display: {
33
+ title: 'Text',
34
+ description: 'Start writing plain text.',
35
+ },
36
+ shortcuts: ['p', 'text'],
37
+ },
38
+ });
39
+ ```
40
+
41
+ ### How to extend
42
+
43
+ ```tsx
44
+ const plugins = [
45
+ Divider.extend({
46
+ renders: {
47
+ divider: (props) => <YourCustomComponent {...props} />
48
+ },
49
+ options: {
50
+ shortcuts: [`<your custom shortcuts>`],
51
+ display: {
52
+ title: `<your custom title>`,
53
+ description: `<your custom description>`,
54
+ },
55
+ HTMLAttributes: {
56
+ className: '<your classname>',
57
+ // ...other HTML attributes
58
+ },
59
+ },
60
+ });
61
+ ];
62
+ ```
@@ -0,0 +1,17 @@
1
+ import { YooEditor, YooptaBlockPath } from '@yoopta/editor';
2
+ import { DividerElement } from '../types';
3
+ type DividerElementOptions = {
4
+ text?: string;
5
+ };
6
+ type DividerInsertOptions = DividerElementOptions & {
7
+ at?: YooptaBlockPath;
8
+ focus?: boolean;
9
+ };
10
+ export type DividerCommands = {
11
+ buildDividerElements: (editor: YooEditor, options?: Partial<DividerElementOptions>) => DividerElement;
12
+ insertDivider: (editor: YooEditor, options?: Partial<DividerInsertOptions>) => void;
13
+ deleteDivider: (editor: YooEditor, blockId: string) => void;
14
+ };
15
+ export declare const DividerCommands: DividerCommands;
16
+ export {};
17
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/commands/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,SAAS,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,oBAAoB,GAAG,qBAAqB,GAAG;IAClD,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,oBAAoB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,cAAc,CAAC;IACtG,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;IACpF,aAAa,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAa7B,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { YooEditor, YooptaBlockData } from '@yoopta/editor';
2
+ import { DividerElementProps } from '../types';
3
+ type Props = {
4
+ editor: YooEditor;
5
+ block: YooptaBlockData;
6
+ props?: DividerElementProps;
7
+ };
8
+ declare const DividerBlockOptions: ({ editor, block, props: dividerProps }: Props) => import("react/jsx-runtime").JSX.Element;
9
+ export { DividerBlockOptions };
10
+ //# sourceMappingURL=DividerBlockOptions.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DividerBlockOptions.d.ts","sourceRoot":"","sources":["../../src/components/DividerBlockOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,SAAS,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAgB,MAAM,UAAU,CAAC;AAQ7D,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,mBAAmB,2CAA4C,KAAK,4CAuEzE,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { PluginEventHandlerOptions, SlateEditor, YooEditor } from '@yoopta/editor';
2
+ export declare function onKeyDown(editor: YooEditor, slate: SlateEditor, { hotkeys, currentBlock }: PluginEventHandlerOptions): (event: any) => void;
3
+ //# sourceMappingURL=onKeyDown.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"onKeyDown.d.ts","sourceRoot":"","sources":["../../src/events/onKeyDown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,yBAAyB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK7F,wBAAgB,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,yBAAyB,wBAepH"}
@@ -0,0 +1,12 @@
1
+ import { DividerElement, DividerElementProps, DividerTheme } from './types';
2
+ import { Divider } from './plugin';
3
+ export { DividerCommands } from './commands';
4
+ import './styles.css';
5
+ declare module 'slate' {
6
+ interface CustomTypes {
7
+ Element: DividerElement;
8
+ }
9
+ }
10
+ export default Divider;
11
+ export { DividerElement, DividerElementProps, DividerTheme };
12
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,cAAc,CAAC;AAEtB,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,OAAO,EAAE,cAAc,CAAC;KACzB;CACF;AAED,eAAe,OAAO,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,YAAY,EAAE,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ import{generateId as e,Blocks as t,buildBlockData as i,Elements as o,UI as r,useYooptaEditor as n,useBlockData as d,YooptaPlugin as s}from"@yoopta/editor";import{jsxs as l,jsx as a}from"react/jsx-runtime";import*as c from"react";const p={buildDividerElements:(t,i={})=>({id:e(),type:"divider",children:[{text:(null==i?void 0:i.text)||""}]}),insertDivider:(e,o={})=>{const{at:r,focus:n,text:d}=o,s=p.buildDividerElements(e,{text:d});t.insertBlock(e,i({value:[s],type:"Divider"}),{at:r,focus:n})},deleteDivider:(e,i)=>{t.deleteBlock(e,{blockId:i})}},h=["solid","dashed","dotted","gradient"];function u(e,t){var i={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(i[o[r]]=e[o[r]])}return i}var m;function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},v.apply(this,arguments)}"function"==typeof SuppressedError&&SuppressedError;var b,y=function(e){return c.createElement("svg",v({width:15,height:15,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),m||(m=c.createElement("path",{d:"M1.25 7.5a.5.5 0 0 1 .5-.5h11.5a.5.5 0 0 1 0 1H1.75a.5.5 0 0 1-.5-.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})))};function g(){return g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},g.apply(this,arguments)}var f,w=function(e){return c.createElement("svg",g({width:15,height:15,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),b||(b=c.createElement("path",{d:"M3.625 7.5a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Zm5 0a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0ZM12.5 8.625a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})))};function x(){return x=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},x.apply(this,arguments)}var O,k=function(e){return c.createElement("svg",x({width:15,height:15,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),f||(f=c.createElement("path",{d:"M0 7.5A.5.5 0 0 1 .5 7H3a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5Zm5.75 0a.5.5 0 0 1 .5-.5h2.5a.5.5 0 0 1 0 1h-2.5a.5.5 0 0 1-.5-.5ZM12 7a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1H12Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})))};function j(){return j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},j.apply(this,arguments)}var E=function(e){return c.createElement("svg",j({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",className:"checkmark_svg__lucide checkmark_svg__lucide-check"},e),O||(O=c.createElement("path",{d:"M20 6 9 17l-5-5"})))};const{ExtendedBlockActions:N,BlockOptionsMenuGroup:C,BlockOptionsMenuItem:D,BlockOptionsSeparator:B}=r,S=({editor:e,block:t,props:i})=>{const r=i=>{o.updateElement(e,t.id,{type:"divider",props:{theme:i}})},n=e=>(null==i?void 0:i.theme)===e;return l(N,Object.assign({onClick:()=>e.setSelection([t.meta.order]),className:"yoopta-divider-options"},{children:[a(B,{}),l(C,{children:[a(D,{children:l("button",Object.assign({type:"button",className:"yoopta-block-options-button justify-between",onClick:()=>r("solid")},{children:[l("span",Object.assign({className:"flex"},{children:[a(y,{width:16,height:16,className:"w-4 h-4 mr-2"}),"Line"]})),n("solid")&&a(E,{width:16,height:16,color:"#000",className:"w-4 h-4"})]}))}),a(D,{children:l("button",Object.assign({type:"button",className:"yoopta-block-options-button justify-between",onClick:()=>r("dashed")},{children:[l("span",Object.assign({className:"flex"},{children:[a(k,{width:16,height:16,color:"tranparent",className:"w-4 h-4 mr-2"}),"Dashed"]})),n("dashed")&&a(E,{width:16,height:16,color:"#000",className:"w-4 h-4"})]}))}),a(D,{children:l("button",Object.assign({type:"button",className:"yoopta-block-options-button justify-between",onClick:()=>r("dotted")},{children:[l("span",Object.assign({className:"flex"},{children:[a(w,{width:16,height:16,className:"w-4 h-4 mr-2"}),"Dots"]})),n("dotted")&&a(E,{width:16,height:16,color:"#000",className:"w-4 h-4"})]}))}),a(D,{children:l("button",Object.assign({type:"button",className:"yoopta-block-options-button justify-between",onClick:()=>r("gradient")},{children:[l("span",Object.assign({className:"flex"},{children:[a(y,{width:14,height:16,className:"w-4 h-4 mr-2",color:(null==i?void 0:i.color)||"#EFEFEE"}),"Gradient"]})),n("gradient")&&a(E,{width:16,height:16,color:"#000",className:"w-4 h-4"})]}))})]})]}))},M=new s({type:"Divider",elements:{divider:{render:e=>{var t,i,{extendRender:o}=e,r=u(e,["extendRender"]);const s=r.HTMLAttributes||{},{className:c=""}=s,p=u(s,["className"]),h=n(),m=d(r.blockId);if(o)return o(r);const v=(null===(t=r.element.props)||void 0===t?void 0:t.color)||"#e5e7eb",b=(null===(i=r.element.props)||void 0===i?void 0:i.theme)||"solid";return l("div",Object.assign({onClick:e=>{h.setSelection([m.meta.order]),h.setBlockSelected([m.meta.order])}},p,{className:`${c} yoopta-divider`},r.attributes,{contentEditable:!1},{children:[!h.readOnly&&a(S,{block:m,editor:h,props:r.element.props}),(()=>{switch(b){case"dashed":return a("hr",{className:"yoopta-divider-dashed",style:{borderColor:v}});case"dotted":return l("div",Object.assign({className:"yoopta-divider-dotted"},{children:[a("div",{style:{backgroundColor:v}}),a("div",{style:{backgroundColor:v}}),a("div",{style:{backgroundColor:v}})]}));case"gradient":return a("div",{className:"yoopta-divider-gradient",style:{background:`linear-gradient(to right, transparent, ${v}, transparent)`}});default:return a("hr",{className:"yoopta-divider-solid",style:{borderColor:v}})}})(),r.children]}))},props:{nodeType:"void",theme:"solid",color:"#EFEFEE"}}},options:{display:{title:"Divider",description:"Divide your blocks"},shortcuts:["---","divider","line"]},parsers:{html:{deserialize:{nodeNames:["HR"],parse:t=>{const i=t.getAttribute("data-meta-theme")||"solid",o=t.getAttribute("data-meta-color")||"#EFEFEE";return{id:e(),type:"divider",props:{nodeType:"void",theme:i,color:o},children:[{text:""}]}}},serialize:(e,t,i)=>{const{theme:o="solid",color:r="#EFEFEE"}=e.props||{};return`<hr data-meta-theme="${o}" data-meta-color="${r}" />`}},markdown:{serialize:(e,t)=>"---\n"}},commands:p,events:{onKeyDown:function(e,t,{hotkeys:i,currentBlock:r}){return t=>{if(i.isCmdShiftD(t)){t.preventDefault();const i=o.getElement(e,r.id,{type:"divider"}),n=h[(h.indexOf(i.props.theme)+1)%h.length];o.updateElement(e,r.id,{type:"divider",props:{theme:n}})}}}}});!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===i&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".mr-2{margin-right:.5rem}.block{display:block}.flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}.justify-between{justify-content:space-between}.yoopta-divider .yoopta-divider-options{color:#000;opacity:0;right:3px;top:3px;transition:opacity .15s ease-in-out}.yoopta-divider:hover .yoopta-divider-options{opacity:1}.yoopta-divider{align-items:center;color:#e5e7eb;display:flex;height:20px;justify-content:center;pointer-events:auto;width:100%}.yoopta-divider-line{border-bottom:2px solid;height:1px;visibility:visible;width:100%}.yoopta-divider-solid{border-bottom:2px solid;border-bottom-style:solid;height:1px;visibility:visible;width:100%}.yoopta-divider-dashed{border-bottom:2px solid;border-bottom-style:dashed;height:1px;visibility:visible;width:100%}.yoopta-divider-dotted{align-items:center;border-bottom:2px solid;border-bottom:none;display:flex;height:3px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible;width:100%}.yoopta-divider-dotted div{border-radius:50%;margin-right:10px;max-height:3px;max-width:3px;min-height:3px;min-width:3px}.yoopta-divider-dotted div:last-child{margin-right:0}.yoopta-divider-gradient{height:2px;width:100%}");export{p as DividerCommands,M as default};
@@ -0,0 +1,5 @@
1
+ import { YooptaPlugin } from '@yoopta/editor';
2
+ import { DividerElementMap } from '../types';
3
+ declare const Divider: YooptaPlugin<DividerElementMap, Record<string, unknown>>;
4
+ export { Divider };
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C,QAAA,MAAM,OAAO,0DAsEX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}
@@ -0,0 +1,11 @@
1
+ import { SlateElement } from '@yoopta/editor';
2
+ export type DividerTheme = 'solid' | 'dashed' | 'dotted' | 'gradient';
3
+ export type DividerElementProps = {
4
+ theme: DividerTheme;
5
+ color?: string;
6
+ };
7
+ export type DividerElement = SlateElement<'divider', DividerElementProps>;
8
+ export type DividerElementMap = {
9
+ divider: DividerElement;
10
+ };
11
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEtE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC;AAC1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,cAAc,CAAC;CACzB,CAAC"}
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { PluginElementRenderProps } from '@yoopta/editor';
3
+ declare const DividerRender: ({ extendRender, ...props }: PluginElementRenderProps) => JSX.Element;
4
+ export { DividerRender };
5
+ //# sourceMappingURL=Divider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/ui/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,wBAAwB,EAAiC,MAAM,gBAAgB,CAAC;AAGzF,QAAA,MAAM,aAAa,+BAAgC,wBAAwB,gBAoD1E,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@yoopta/divider",
3
+ "version": "4.7.1-rc.4",
4
+ "description": "Divider plugin for Yoopta Editor",
5
+ "author": "Darginec05 <devopsbanda@gmail.com>",
6
+ "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",
7
+ "license": "MIT",
8
+ "private": false,
9
+ "main": "dist/index.js",
10
+ "type": "module",
11
+ "module": "dist/index.js",
12
+ "types": "./dist/index.d.ts",
13
+ "files": [
14
+ "dist/"
15
+ ],
16
+ "peerDependencies": {
17
+ "@yoopta/editor": ">=4.0.0",
18
+ "react": ">=17.0.2",
19
+ "react-dom": ">=17.0.2"
20
+ },
21
+ "publishConfig": {
22
+ "registry": "https://registry.yarnpkg.com"
23
+ },
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "git+https://github.com/Darginec05/Editor-Yoopta.git"
27
+ },
28
+ "scripts": {
29
+ "test": "node ./__tests__/@yoopta/divider.test.js",
30
+ "start": "rollup --config rollup.config.js --watch --bundleConfigAsCjs --environment NODE_ENV:development",
31
+ "prepublishOnly": "yarn build",
32
+ "build": "rollup --config rollup.config.js --bundleConfigAsCjs --environment NODE_ENV:production"
33
+ },
34
+ "bugs": {
35
+ "url": "https://github.com/Darginec05/Editor-Yoopta/issues"
36
+ },
37
+ "gitHead": "12d8460dfe0ead89ee1d6f3f2f1fc68239e93d4c"
38
+ }