pillardash-ui-react 0.1.148 → 0.1.151
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 +66 -10
- package/dist/cjs/components/Form/TextEditor/TextEditor.js +1 -1
- package/dist/cjs/components/Form/TextEditor/TextEditor.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/text-editor.js +2 -0
- package/dist/cjs/text-editor.js.map +1 -0
- package/dist/esm/components/Form/TextEditor/TextEditor.mjs +1 -1
- package/dist/esm/components/Form/TextEditor/TextEditor.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/text-editor.mjs +2 -0
- package/dist/esm/text-editor.mjs.map +1 -0
- package/dist/index.d.ts +2 -32
- package/dist/text-editor.d.ts +37 -0
- package/package.json +7 -1
package/README.md
CHANGED
|
@@ -54,22 +54,79 @@ This library requires:
|
|
|
54
54
|
|
|
55
55
|
## Available Components
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
Prefer these components before hand-rolling reusable UI in consumer apps.
|
|
58
|
+
|
|
59
|
+
### Root Exports
|
|
60
|
+
|
|
61
|
+
Import these from `pillardash-ui-react`:
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { Button, Card, Input, Modal, Table } from "pillardash-ui-react";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
#### Buttons
|
|
58
68
|
- `Button` - Interactive button element
|
|
69
|
+
- `ExportButton` - Export action button
|
|
70
|
+
|
|
71
|
+
#### Cards
|
|
72
|
+
- `Card` - Flexible content container
|
|
73
|
+
- `EmptyStateCard` - Empty state display with optional action
|
|
74
|
+
|
|
75
|
+
#### Form Controls
|
|
59
76
|
- `CheckBox` - Custom checkbox input
|
|
77
|
+
- `RadioGroup` - Radio input group
|
|
60
78
|
- `FileUpload` - File upload component with drag-and-drop
|
|
61
|
-
- `Input` - Text input field
|
|
79
|
+
- `Input` - Text input field, including textarea mode
|
|
80
|
+
- `InputWithPrefix` - Input with a leading prefix
|
|
81
|
+
- `TagInput` - Multi-tag input
|
|
82
|
+
- `DateTimePicker` - Date/time input
|
|
62
83
|
- `Search` - Search input with debounce
|
|
63
84
|
- `Select` - Custom select dropdown
|
|
64
|
-
- `
|
|
85
|
+
- `SelectButton` - Button-style select control
|
|
86
|
+
|
|
87
|
+
#### Feedback
|
|
88
|
+
- `alert` - Global alert helper
|
|
89
|
+
- `AlertProvider` - Alert context provider
|
|
90
|
+
- `useAlert` - Alert hook
|
|
91
|
+
- `ConfirmationAlert` - Confirmation dialog/alert
|
|
92
|
+
|
|
93
|
+
#### Overlays
|
|
94
|
+
- `Modal` - Modal/dialog component
|
|
95
|
+
|
|
96
|
+
#### Data Display
|
|
97
|
+
- `Table` - Data table
|
|
98
|
+
- `Pagination` - Pagination controls
|
|
99
|
+
- `TableSkeleton` - Table loading skeleton
|
|
100
|
+
- `TableDropdown` - Table row action dropdown
|
|
101
|
+
- `Badge` - Status/label badge
|
|
102
|
+
- `FileView` - File/document viewer
|
|
103
|
+
|
|
104
|
+
#### Loading And Skeletons
|
|
105
|
+
- `Loading` - Animated loading indicator
|
|
106
|
+
- `SkeletonLoader` - Base skeleton loader
|
|
107
|
+
- `SkeletonText` - Text skeleton
|
|
108
|
+
- `SkeletonAvatar` - Avatar skeleton
|
|
109
|
+
- `SkeletonButton` - Button skeleton
|
|
110
|
+
- `SkeletonCard` - Card skeleton
|
|
111
|
+
- `SkeletonImage` - Image skeleton
|
|
112
|
+
- `SkeletonProfile` - Profile skeleton layout
|
|
113
|
+
- `SkeletonList` - List skeleton layout
|
|
114
|
+
- `SkeletonTable` - Table skeleton layout
|
|
115
|
+
- `CardStatsSkeleton` - Stats card skeleton layout
|
|
116
|
+
|
|
117
|
+
#### Navigation And Helpers
|
|
118
|
+
- `Breadcrumb` - Breadcrumb navigation
|
|
119
|
+
- `Tooltip` - Tooltip component
|
|
120
|
+
|
|
121
|
+
### Subpath Exports
|
|
122
|
+
|
|
123
|
+
`TextEditor` is exported from a subpath because it depends on TipTap packages:
|
|
65
124
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
125
|
+
```tsx
|
|
126
|
+
import { TextEditor } from "pillardash-ui-react/text-editor";
|
|
127
|
+
```
|
|
69
128
|
|
|
70
|
-
|
|
71
|
-
- `Alert` - Contextual notification messages
|
|
72
|
-
- `Loading` - Animated loading indicators
|
|
129
|
+
Do not import `TextEditor` from the root `pillardash-ui-react` entrypoint.
|
|
73
130
|
|
|
74
131
|
## Theming
|
|
75
132
|
|
|
@@ -175,4 +232,3 @@ MIT © [Osai Technologies](https://osaitech.dev)
|
|
|
175
232
|
2. Install dependencies: `npm install`
|
|
176
233
|
3. Run Storybook: `npm run storybook`
|
|
177
234
|
4. Build the library: `npm run build`
|
|
178
|
-
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("@tiptap/react"),s=require("./ImagePopover.js"),r=require("./LinkPopover.js"),
|
|
1
|
+
"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("@tiptap/react"),s=require("./ImagePopover.js"),r=require("./LinkPopover.js"),a=require("./ToolbarGroups.js"),l=require("./extensions.js"),n=require("./toolbar.js");module.exports=function(d){var u=d.initialContent,c=void 0===u?"":u,g=d.onUpdate,m=d.features,b=d.stickyToolbar,f=void 0===b||b,x=d.toolbarPreset,v=void 0===x?"standard":x,h=d.onImageUpload,j=d.className,p=void 0===j?"":j,k=d.editorClassName,T=void 0===k?"":k,y=d.contentClassName,w=void 0===y?"":y,C=o.useMemo((function(){return l.withDefaultFeatures(e.__assign(e.__assign({},l.toolbarPresetFeatures[v]),m))}),[m,v]),q=o.useState(!1),L=q[0],N=q[1],D=o.useState(null),E=D[0],H=D[1],U=i.useEditor({extensions:l.createTextEditorExtensions(C),content:c,onUpdate:function(e){var t=e.editor;g(t.getHTML())},editorProps:{attributes:{class:"".concat(l.editorContentClassName," ").concat(w).trim()},handleKeyDown:function(e,t){return!!C.slashCommand&&("/"===t.key?(N(!0),!1):("Escape"===t.key&&N(!1),!1))}},immediatelyRender:!1});o.useEffect((function(){if(U){var e=function(){var e=U.state.selection;if(e.from!==e.to&&U.isFocused){var t=window.getSelection();if(t&&0!==t.rangeCount){var o=t.getRangeAt(0).getBoundingClientRect();H({top:o.top+window.scrollY-48,left:o.left+window.scrollX+o.width/2})}else H(null)}else H(null)},t=function(){return H(null)};return U.on("selectionUpdate",e),U.on("blur",t),function(){U.off("selectionUpdate",e),U.off("blur",t)}}}),[U]);var P=o.useRef(c);o.useEffect((function(){U&&(c!==P.current&&U.getHTML()===P.current&&(U.commands.setContent(c||"",{emitUpdate:!1}),P.current=c))}),[U,c]);var A=C.heading||C.formatting||C.lists||C.code||C.quote||C.link||C.table||C.image||C.taskList||C.alignment;return U?t.jsxs("div",{className:"pd-text-editor w-full rounded-lg border border-gray-200 shadow-sm ".concat(p).trim(),children:[f&&t.jsxs("div",{className:"sticky top-0 z-10 flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3",children:[C.history&&t.jsx(a.HistoryTools,{editor:U}),C.history&&A&&t.jsx(n.ToolbarDivider,{}),C.heading&&t.jsx(n.HeadingSelect,{value:(null==U?void 0:U.isActive("heading",{level:1}))?1:(null==U?void 0:U.isActive("heading",{level:2}))?2:(null==U?void 0:U.isActive("heading",{level:3}))?3:0,onChange:function(e){0===e?U.chain().focus().setParagraph().run():U.chain().focus().toggleHeading({level:e}).run()}}),C.heading&&(C.formatting||C.lists||C.code||C.quote||C.link||C.table||C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.formatting&&t.jsx(a.FormattingTools,{editor:U}),C.formatting&&(C.alignment||C.lists||C.code||C.quote||C.link||C.table||C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.alignment&&t.jsx(a.AlignmentTools,{editor:U}),C.alignment&&(C.lists||C.code||C.quote||C.link||C.table||C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.lists&&t.jsx(a.ListTools,{editor:U}),C.lists&&(C.code||C.quote||C.link||C.table||C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.code&&t.jsx(a.CodeTools,{editor:U}),C.code&&(C.quote||C.link||C.table||C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.quote&&t.jsx(a.QuoteTools,{editor:U}),C.quote&&(C.link||C.table||C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.link&&t.jsx(r,{editor:U}),C.link&&(C.table||C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.table&&t.jsx(a.TableTools,{editor:U}),C.table&&(C.image||C.taskList)&&t.jsx(n.ToolbarDivider,{}),C.image&&t.jsx(s,{editor:U,onImageUpload:h}),C.image&&C.taskList&&t.jsx(n.ToolbarDivider,{}),C.taskList&&t.jsx(a.InsertTools,{editor:U})]}),!1===f&&E&&t.jsxs("div",{className:"fixed z-20 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-1 shadow-lg",style:{top:E.top,left:E.left},children:[t.jsx(a.FormattingTools,{editor:U}),C.link&&t.jsx(r,{editor:U})]}),C.slashCommand&&L&&t.jsxs("div",{className:"absolute left-4 top-16 z-20 w-56 rounded-lg border border-gray-200 bg-white p-2 shadow-lg",children:[t.jsx("button",{type:"button",className:"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100",onClick:function(){U.chain().focus().toggleHeading({level:1}).run(),N(!1)},children:"Heading 1"}),t.jsx("button",{type:"button",className:"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100",onClick:function(){U.chain().focus().toggleBulletList().run(),N(!1)},children:"Bullet List"}),t.jsx("button",{type:"button",className:"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100",onClick:function(){U.chain().focus().toggleCodeBlock().run(),N(!1)},children:"Code Block"})]}),t.jsx(i.EditorContent,{editor:U,className:"w-full min-h-[300px] focus-within:bg-white ".concat(T).trim()})]}):t.jsx("div",{className:"rounded-lg border bg-gray-50 h-48 animate-pulse"})};
|
|
2
2
|
//# sourceMappingURL=TextEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.js","sources":["../../../../../src/components/Form/TextEditor/TextEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport ImagePopover from \"./ImagePopover\";\nimport LinkPopover from \"./LinkPopover\";\nimport { AlignmentTools, CodeTools, FormattingTools, HistoryTools, InsertTools, ListTools, QuoteTools, TableTools } from \"./ToolbarGroups\";\nimport { createTextEditorExtensions, editorContentClassName, type TextEditorFeatures, type ToolbarPreset, toolbarPresetFeatures, withDefaultFeatures } from \"./extensions\";\nimport { HeadingLevel, HeadingSelect, ToolbarDivider } from \"./toolbar\";\n\nexport interface TextEditorProps {\n initialContent?: string;\n onUpdate: (content: string) => void;\n features?: TextEditorFeatures;\n stickyToolbar?: boolean;\n toolbarPreset?: ToolbarPreset;\n onImageUpload?: (file: File) => Promise<{ url: string; assetId?: string }>;\n}\n\nconst TextEditor: React.FC<TextEditorProps> = ({ initialContent = \"\", onUpdate, features, stickyToolbar = true, toolbarPreset = \"standard\", onImageUpload }) => {\n const enabledFeatures = React.useMemo(() => withDefaultFeatures({ ...toolbarPresetFeatures[toolbarPreset], ...features }), [features, toolbarPreset]);\n const [slashOpen, setSlashOpen] = React.useState(false);\n const [bubblePos, setBubblePos] = React.useState<{ top: number; left: number } | null>(null);\n\n const editor = useEditor({\n extensions: createTextEditorExtensions(enabledFeatures),\n content: initialContent,\n onUpdate: ({ editor }) => {\n onUpdate(editor.getHTML());\n },\n editorProps: {\n attributes: {\n class: editorContentClassName,\n },\n handleKeyDown: (_view, event) => {\n if (!enabledFeatures.slashCommand) return false;\n if (event.key === \"/\") {\n setSlashOpen(true);\n return false;\n }\n if (event.key === \"Escape\") {\n setSlashOpen(false);\n }\n return false;\n },\n },\n immediatelyRender: false,\n });\n\n React.useEffect(() => {\n if (!editor) return;\n const updateBubble = () => {\n const { from, to } = editor.state.selection;\n if (from === to || !editor.isFocused) {\n setBubblePos(null);\n return;\n }\n const selection = window.getSelection();\n if (!selection || selection.rangeCount === 0) {\n setBubblePos(null);\n return;\n }\n const rect = selection.getRangeAt(0).getBoundingClientRect();\n setBubblePos({ top: rect.top + window.scrollY - 48, left: rect.left + window.scrollX + rect.width / 2 });\n };\n const onBlur = () => setBubblePos(null);\n editor.on(\"selectionUpdate\", updateBubble);\n editor.on(\"blur\", onBlur);\n return () => {\n editor.off(\"selectionUpdate\", updateBubble);\n editor.off(\"blur\", onBlur);\n };\n }, [editor]);\n\n const lastAppliedInitialContentRef = React.useRef(initialContent);\n\n React.useEffect(() => {\n if (!editor) {\n return;\n }\n\n if (initialContent === lastAppliedInitialContentRef.current) {\n return;\n }\n\n const currentContent = editor.getHTML();\n const wasUntouchedSinceLastSync = currentContent === lastAppliedInitialContentRef.current;\n\n if (!wasUntouchedSinceLastSync) {\n return;\n }\n\n editor.commands.setContent(initialContent || \"\", { emitUpdate: false });\n lastAppliedInitialContentRef.current = initialContent;\n }, [editor, initialContent]);\n\n const getActiveHeadingLevel = (): HeadingLevel => {\n if (editor?.isActive(\"heading\", { level: 1 })) return 1;\n if (editor?.isActive(\"heading\", { level: 2 })) return 2;\n if (editor?.isActive(\"heading\", { level: 3 })) return 3;\n return 0;\n };\n\n const hasAnyMainTools =\n enabledFeatures.heading ||\n enabledFeatures.formatting ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList ||\n enabledFeatures.alignment;\n\n if (!editor) {\n return <div className=\"rounded-lg border bg-gray-50 h-48 animate-pulse\"></div>;\n }\n\n return (\n <div className='pd-text-editor w-full rounded-lg border border-gray-200 shadow-sm'>\n {/* Toolbar */}\n <div className={`flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3 ${stickyToolbar ? \"sticky top-0 z-10\" : \"\"}`}>\n {/* Undo/Redo */}\n {enabledFeatures.history && <HistoryTools editor={editor} />}\n\n {enabledFeatures.history && hasAnyMainTools && <ToolbarDivider />}\n\n {/* Headings */}\n {enabledFeatures.heading && <HeadingSelect value={getActiveHeadingLevel()} onChange={(level) => {\n if (level === 0) editor.chain().focus().setParagraph().run();\n else editor.chain().focus().toggleHeading({ level }).run();\n }} />}\n\n {enabledFeatures.heading && (enabledFeatures.formatting || enabledFeatures.lists || enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.formatting && <FormattingTools editor={editor} />}\n\n {enabledFeatures.formatting && (enabledFeatures.alignment || enabledFeatures.lists || enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.alignment && <AlignmentTools editor={editor} />}\n\n {enabledFeatures.alignment && (enabledFeatures.lists || enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.lists && <ListTools editor={editor} />}\n\n {enabledFeatures.lists && (enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.code && <CodeTools editor={editor} />}\n\n {enabledFeatures.code && (enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.quote && <QuoteTools editor={editor} />}\n\n {enabledFeatures.quote && (enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {/* Link */}\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n\n {enabledFeatures.link && (enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.table && <TableTools editor={editor} />}\n\n {enabledFeatures.table && (enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.image && <ImagePopover editor={editor} onImageUpload={onImageUpload} />}\n\n {enabledFeatures.image && enabledFeatures.taskList && <ToolbarDivider />}\n\n {enabledFeatures.taskList && <InsertTools editor={editor} />}\n </div>\n\n {stickyToolbar === false && bubblePos && (\n <div className=\"fixed z-20 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-1 shadow-lg\" style={{ top: bubblePos.top, left: bubblePos.left }}>\n <FormattingTools editor={editor} />\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n </div>\n )}\n\n {enabledFeatures.slashCommand && slashOpen && (\n <div className=\"absolute left-4 top-16 z-20 w-56 rounded-lg border border-gray-200 bg-white p-2 shadow-lg\">\n <button type=\"button\" className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\" onClick={() => { editor.chain().focus().toggleHeading({ level: 1 }).run(); setSlashOpen(false); }}>Heading 1</button>\n <button type=\"button\" className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\" onClick={() => { editor.chain().focus().toggleBulletList().run(); setSlashOpen(false); }}>Bullet List</button>\n <button type=\"button\" className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\" onClick={() => { editor.chain().focus().toggleCodeBlock().run(); setSlashOpen(false); }}>Code Block</button>\n </div>\n )}\n\n {/* Editor */}\n <EditorContent\n editor={editor}\n className='w-full min-h-[300px] focus-within:bg-white'\n />\n </div>\n );\n};\n\nexport default TextEditor;\n"],"names":["_a","_b","initialContent","onUpdate","features","_c","stickyToolbar","_d","toolbarPreset","onImageUpload","enabledFeatures","React","useMemo","withDefaultFeatures","__assign","toolbarPresetFeatures","_e","useState","slashOpen","setSlashOpen","_f","bubblePos","setBubblePos","editor","useEditor","extensions","createTextEditorExtensions","content","getHTML","editorProps","attributes","class","editorContentClassName","handleKeyDown","_view","event","slashCommand","key","immediatelyRender","useEffect","updateBubble","state","selection","from","to","isFocused","window","getSelection","rangeCount","rect","getRangeAt","getBoundingClientRect","top","scrollY","left","scrollX","width","onBlur","on","off","lastAppliedInitialContentRef","useRef","current","commands","setContent","emitUpdate","hasAnyMainTools","heading","formatting","lists","code","quote","link","table","image","taskList","alignment","_jsxs","className","children","concat","history","_jsx","HistoryTools","ToolbarDivider","HeadingSelect","value","isActive","level","onChange","chain","focus","setParagraph","run","toggleHeading","FormattingTools","AlignmentTools","ListTools","CodeTools","QuoteTools","LinkPopover","TableTools","ImagePopover","InsertTools","style","type","onClick","toggleBulletList","toggleCodeBlock","EditorContent"],"mappings":"uTAiB8C,SAACA,OAAEC,EAAAD,EAAAE,eAAAA,OAAc,IAAAD,EAAG,GAAEA,EAAEE,EAAQH,EAAAG,SAAEC,EAAQJ,EAAAI,SAAEC,EAAAL,EAAAM,cAAAA,OAAa,IAAAD,GAAOA,EAAEE,EAAAP,EAAAQ,cAAAA,OAAa,IAAAD,EAAG,WAAUA,EAAEE,EAAaT,EAAAS,cAC/IC,EAAkBC,EAAMC,SAAQ,WAAM,OAAAC,sBAAmBC,EAAAA,SAAAA,EAAAA,SAAA,CAAA,EAAMC,EAAAA,sBAAsBP,IAAmBJ,GAAlE,GAA+E,CAACA,EAAUI,IAChIQ,EAA4BL,EAAMM,UAAS,GAA1CC,EAASF,EAAA,GAAEG,OACZC,EAA4BT,EAAMM,SAA+C,MAAhFI,EAASD,EAAA,GAAEE,OAEZC,EAASC,EAAAA,UAAU,CACrBC,WAAYC,EAAAA,2BAA2BhB,GACvCiB,QAASzB,EACTC,SAAU,SAACH,GAAE,IAAAuB,EAAMvB,EAAAuB,OACfpB,EAASoB,EAAOK,UACpB,EACAC,YAAa,CACTC,WAAY,CACRC,MAAOC,EAAAA,wBAEXC,cAAe,SAACC,EAAOC,GACnB,QAAKzB,EAAgB0B,eACH,MAAdD,EAAME,KACNlB,GAAa,IACN,IAEO,WAAdgB,EAAME,KACNlB,GAAa,IAEV,GACX,GAEJmB,mBAAmB,IAGvB3B,EAAM4B,WAAU,WACZ,GAAKhB,EAAL,CACA,IAAMiB,EAAe,WACX,IAAAxC,EAAeuB,EAAOkB,MAAMC,UAClC,GADY1C,EAAA2C,OAAI3C,EAAA4C,IACIrB,EAAOsB,UAA3B,CAIA,IAAMH,EAAYI,OAAOC,eACzB,GAAKL,GAAsC,IAAzBA,EAAUM,WAA5B,CAIA,IAAMC,EAAOP,EAAUQ,WAAW,GAAGC,wBACrC7B,EAAa,CAAE8B,IAAKH,EAAKG,IAAMN,OAAOO,QAAU,GAAIC,KAAML,EAAKK,KAAOR,OAAOS,QAAUN,EAAKO,MAAQ,GAFpG,MAFIlC,EAAa,KAHjB,MAFIA,EAAa,KAUrB,EACMmC,EAAS,WAAM,OAAAnC,EAAa,KAAb,EAGrB,OAFAC,EAAOmC,GAAG,kBAAmBlB,GAC7BjB,EAAOmC,GAAG,OAAQD,GACX,WACHlC,EAAOoC,IAAI,kBAAmBnB,GAC9BjB,EAAOoC,IAAI,OAAQF,EACvB,CArBa,CAsBjB,GAAG,CAAClC,IAEJ,IAAMqC,EAA+BjD,EAAMkD,OAAO3D,GAElDS,EAAM4B,WAAU,WACPhB,IAIDrB,IAAmB0D,EAA6BE,SAI7BvC,EAAOK,YACuBgC,EAA6BE,UAMlFvC,EAAOwC,SAASC,WAAW9D,GAAkB,GAAI,CAAE+D,YAAY,IAC/DL,EAA6BE,QAAU5D,GAC3C,GAAG,CAACqB,EAAQrB,IAEZ,IAOMgE,EACFxD,EAAgByD,SAChBzD,EAAgB0D,YAChB1D,EAAgB2D,OAChB3D,EAAgB4D,MAChB5D,EAAgB6D,OAChB7D,EAAgB8D,MAChB9D,EAAgB+D,OAChB/D,EAAgBgE,OAChBhE,EAAgBiE,UAChBjE,EAAgBkE,UAEpB,OAAKrD,EAKDsD,EAAAA,KAAA,MAAA,CAAKC,UAAU,oEAAmEC,SAAA,CAE9EF,OAAA,MAAA,CAAKC,UAAW,6DAAAE,OAA6D1E,EAAgB,oBAAsB,IAAIyE,SAAA,CAElHrE,EAAgBuE,SAAWC,EAAAA,IAACC,EAAAA,aAAY,CAAC5D,OAAQA,IAEjDb,EAAgBuE,SAAWf,GAAmBgB,MAACE,EAAAA,eAAc,CAAA,GAG7D1E,EAAgByD,SAAWe,EAAAA,IAACG,gBAAa,CAACC,OAhC/C/D,aAAM,EAANA,EAAQgE,SAAS,UAAW,CAAEC,MAAO,KAAa,GAClDjE,aAAM,EAANA,EAAQgE,SAAS,UAAW,CAAEC,MAAO,KAAa,GAClDjE,aAAM,EAANA,EAAQgE,SAAS,UAAW,CAAEC,MAAO,KAAa,EAC/C,EA6B4EC,SAAU,SAACD,GACpE,IAAVA,EAAajE,EAAOmE,QAAQC,QAAQC,eAAeC,MAClDtE,EAAOmE,QAAQC,QAAQG,cAAc,CAAEN,MAAKA,IAAIK,KACzD,IAECnF,EAAgByD,UAAYzD,EAAgB0D,YAAc1D,EAAgB2D,OAAS3D,EAAgB4D,MAAQ5D,EAAgB6D,OAAS7D,EAAgB8D,MAAQ9D,EAAgB+D,OAAS/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,EAAAA,IAACE,EAAAA,eAAc,CAAA,GAE1P1E,EAAgB0D,YAAcc,MAACa,EAAAA,gBAAe,CAACxE,OAAQA,IAEvDb,EAAgB0D,aAAe1D,EAAgBkE,WAAalE,EAAgB2D,OAAS3D,EAAgB4D,MAAQ5D,EAAgB6D,OAAS7D,EAAgB8D,MAAQ9D,EAAgB+D,OAAS/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,MAACE,EAAAA,eAAc,CAAA,GAE5P1E,EAAgBkE,WAAaM,EAAAA,IAACc,EAAAA,eAAc,CAACzE,OAAQA,IAErDb,EAAgBkE,YAAclE,EAAgB2D,OAAS3D,EAAgB4D,MAAQ5D,EAAgB6D,OAAS7D,EAAgB8D,MAAQ9D,EAAgB+D,OAAS/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,EAAAA,IAACE,EAAAA,eAAc,CAAA,GAE9N1E,EAAgB2D,OAASa,EAAAA,IAACe,EAAAA,UAAS,CAAC1E,OAAQA,IAE5Cb,EAAgB2D,QAAU3D,EAAgB4D,MAAQ5D,EAAgB6D,OAAS7D,EAAgB8D,MAAQ9D,EAAgB+D,OAAS/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,MAACE,EAAAA,mBAEnL1E,EAAgB4D,MAAQY,EAAAA,IAACgB,EAAAA,UAAS,CAAC3E,OAAQA,IAE3Cb,EAAgB4D,OAAS5D,EAAgB6D,OAAS7D,EAAgB8D,MAAQ9D,EAAgB+D,OAAS/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,EAAAA,IAACE,EAAAA,eAAc,CAAA,GAExK1E,EAAgB6D,OAASW,MAACiB,EAAAA,WAAU,CAAC5E,OAAQA,IAE7Cb,EAAgB6D,QAAU7D,EAAgB8D,MAAQ9D,EAAgB+D,OAAS/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,MAACE,EAAAA,eAAc,CAAA,GAGhJ1E,EAAgB8D,MAAQU,EAAAA,IAACkB,EAAW,CAAC7E,OAAQA,IAE7Cb,EAAgB8D,OAAS9D,EAAgB+D,OAAS/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,EAAAA,IAACE,EAAAA,eAAc,IAEvH1E,EAAgB+D,OAASS,EAAAA,IAACmB,EAAAA,WAAU,CAAC9E,OAAQA,IAE7Cb,EAAgB+D,QAAU/D,EAAgBgE,OAAShE,EAAgBiE,WAAaO,MAACE,EAAAA,eAAc,CAAA,GAE/F1E,EAAgBgE,OAASQ,MAACoB,GAAa/E,OAAQA,EAAQd,cAAeA,IAEtEC,EAAgBgE,OAAShE,EAAgBiE,UAAYO,EAAAA,IAACE,EAAAA,eAAc,IAEpE1E,EAAgBiE,UAAYO,EAAAA,IAACqB,EAAAA,YAAW,CAAChF,OAAQA,QAGnC,IAAlBjB,GAA2Be,GACxBwD,EAAAA,KAAA,MAAA,CAAKC,UAAU,uFAAuF0B,MAAO,CAAEpD,IAAK/B,EAAU+B,IAAKE,KAAMjC,EAAUiC,MAAMyB,SAAA,CACrJG,EAAAA,IAACa,EAAAA,gBAAe,CAACxE,OAAQA,IACxBb,EAAgB8D,MAAQU,EAAAA,IAACkB,EAAW,CAAC7E,OAAQA,OAIrDb,EAAgB0B,cAAgBlB,GAC7B2D,EAAAA,KAAA,MAAA,CAAKC,UAAU,4FAA2FC,SAAA,CACtGG,EAAAA,IAAA,SAAA,CAAQuB,KAAK,SAAS3B,UAAU,qEAAqE4B,QAAS,WAAQnF,EAAOmE,QAAQC,QAAQG,cAAc,CAAEN,MAAO,IAAKK,MAAO1E,GAAa,EAAQ,EAAC4D,SAAA,cACtMG,EAAAA,IAAA,SAAA,CAAQuB,KAAK,SAAS3B,UAAU,qEAAqE4B,QAAS,WAAQnF,EAAOmE,QAAQC,QAAQgB,mBAAmBd,MAAO1E,GAAa,EAAQ,EAAC4D,SAAA,gBAC7LG,EAAAA,IAAA,SAAA,CAAQuB,KAAK,SAAS3B,UAAU,qEAAqE4B,QAAS,WAAQnF,EAAOmE,QAAQC,QAAQiB,kBAAkBf,MAAO1E,GAAa,EAAQ,EAAC4D,SAAA,kBAKpMG,EAAAA,IAAC2B,EAAAA,cAAa,CACVtF,OAAQA,EACRuD,UAAU,kDA1EXI,EAAAA,IAAA,MAAA,CAAKJ,UAAU,mDA8E9B"}
|
|
1
|
+
{"version":3,"file":"TextEditor.js","sources":["../../../../../src/components/Form/TextEditor/TextEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport ImagePopover from \"./ImagePopover\";\nimport LinkPopover from \"./LinkPopover\";\nimport {\n AlignmentTools,\n CodeTools,\n FormattingTools,\n HistoryTools,\n InsertTools,\n ListTools,\n QuoteTools,\n TableTools,\n} from \"./ToolbarGroups\";\nimport {\n createTextEditorExtensions,\n editorContentClassName,\n type TextEditorFeatures,\n type ToolbarPreset,\n toolbarPresetFeatures,\n withDefaultFeatures,\n} from \"./extensions\";\nimport { HeadingLevel, HeadingSelect, ToolbarDivider } from \"./toolbar\";\n\nexport interface TextEditorProps {\n initialContent?: string;\n onUpdate: (content: string) => void;\n features?: TextEditorFeatures;\n stickyToolbar?: boolean;\n toolbarPreset?: ToolbarPreset;\n onImageUpload?: (file: File) => Promise<{ url: string; assetId?: string }>;\n className?: string;\n editorClassName?: string;\n contentClassName?: string;\n}\n\nconst TextEditor: React.FC<TextEditorProps> = ({\n initialContent = \"\",\n onUpdate,\n features,\n stickyToolbar = true,\n toolbarPreset = \"standard\",\n onImageUpload,\n className = \"\",\n editorClassName = \"\",\n contentClassName = \"\",\n}) => {\n const enabledFeatures = React.useMemo(\n () =>\n withDefaultFeatures({\n ...toolbarPresetFeatures[toolbarPreset],\n ...features,\n }),\n [features, toolbarPreset],\n );\n const [slashOpen, setSlashOpen] = React.useState(false);\n const [bubblePos, setBubblePos] = React.useState<{\n top: number;\n left: number;\n } | null>(null);\n\n const editor = useEditor({\n extensions: createTextEditorExtensions(enabledFeatures),\n content: initialContent,\n onUpdate: ({ editor }) => {\n onUpdate(editor.getHTML());\n },\n editorProps: {\n attributes: {\n class: `${editorContentClassName} ${contentClassName}`.trim(),\n },\n handleKeyDown: (_view, event) => {\n if (!enabledFeatures.slashCommand) return false;\n if (event.key === \"/\") {\n setSlashOpen(true);\n return false;\n }\n if (event.key === \"Escape\") {\n setSlashOpen(false);\n }\n return false;\n },\n },\n immediatelyRender: false,\n });\n\n React.useEffect(() => {\n if (!editor) return;\n const updateBubble = () => {\n const { from, to } = editor.state.selection;\n if (from === to || !editor.isFocused) {\n setBubblePos(null);\n return;\n }\n const selection = window.getSelection();\n if (!selection || selection.rangeCount === 0) {\n setBubblePos(null);\n return;\n }\n const rect = selection.getRangeAt(0).getBoundingClientRect();\n setBubblePos({\n top: rect.top + window.scrollY - 48,\n left: rect.left + window.scrollX + rect.width / 2,\n });\n };\n const onBlur = () => setBubblePos(null);\n editor.on(\"selectionUpdate\", updateBubble);\n editor.on(\"blur\", onBlur);\n return () => {\n editor.off(\"selectionUpdate\", updateBubble);\n editor.off(\"blur\", onBlur);\n };\n }, [editor]);\n\n const lastAppliedInitialContentRef = React.useRef(initialContent);\n\n React.useEffect(() => {\n if (!editor) {\n return;\n }\n\n if (initialContent === lastAppliedInitialContentRef.current) {\n return;\n }\n\n const currentContent = editor.getHTML();\n const wasUntouchedSinceLastSync =\n currentContent === lastAppliedInitialContentRef.current;\n\n if (!wasUntouchedSinceLastSync) {\n return;\n }\n\n editor.commands.setContent(initialContent || \"\", { emitUpdate: false });\n lastAppliedInitialContentRef.current = initialContent;\n }, [editor, initialContent]);\n\n const getActiveHeadingLevel = (): HeadingLevel => {\n if (editor?.isActive(\"heading\", { level: 1 })) return 1;\n if (editor?.isActive(\"heading\", { level: 2 })) return 2;\n if (editor?.isActive(\"heading\", { level: 3 })) return 3;\n return 0;\n };\n\n const hasAnyMainTools =\n enabledFeatures.heading ||\n enabledFeatures.formatting ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList ||\n enabledFeatures.alignment;\n\n if (!editor) {\n return (\n <div className=\"rounded-lg border bg-gray-50 h-48 animate-pulse\"></div>\n );\n }\n\n return (\n <div\n className={`pd-text-editor w-full rounded-lg border border-gray-200 shadow-sm ${className}`.trim()}\n >\n {stickyToolbar && (\n <div className=\"sticky top-0 z-10 flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3\">\n {enabledFeatures.history && <HistoryTools editor={editor} />}\n\n {enabledFeatures.history && hasAnyMainTools && <ToolbarDivider />}\n\n {enabledFeatures.heading && (\n <HeadingSelect\n value={getActiveHeadingLevel()}\n onChange={(level) => {\n if (level === 0) editor.chain().focus().setParagraph().run();\n else editor.chain().focus().toggleHeading({ level }).run();\n }}\n />\n )}\n\n {enabledFeatures.heading &&\n (enabledFeatures.formatting ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.formatting && <FormattingTools editor={editor} />}\n\n {enabledFeatures.formatting &&\n (enabledFeatures.alignment ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.alignment && <AlignmentTools editor={editor} />}\n\n {enabledFeatures.alignment &&\n (enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.lists && <ListTools editor={editor} />}\n\n {enabledFeatures.lists &&\n (enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.code && <CodeTools editor={editor} />}\n\n {enabledFeatures.code &&\n (enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.quote && <QuoteTools editor={editor} />}\n\n {enabledFeatures.quote &&\n (enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n\n {enabledFeatures.link &&\n (enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.table && <TableTools editor={editor} />}\n\n {enabledFeatures.table &&\n (enabledFeatures.image || enabledFeatures.taskList) && (\n <ToolbarDivider />\n )}\n\n {enabledFeatures.image && (\n <ImagePopover editor={editor} onImageUpload={onImageUpload} />\n )}\n\n {enabledFeatures.image && enabledFeatures.taskList && (\n <ToolbarDivider />\n )}\n\n {enabledFeatures.taskList && <InsertTools editor={editor} />}\n </div>\n )}\n\n {stickyToolbar === false && bubblePos && (\n <div\n className=\"fixed z-20 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-1 shadow-lg\"\n style={{ top: bubblePos.top, left: bubblePos.left }}\n >\n <FormattingTools editor={editor} />\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n </div>\n )}\n\n {enabledFeatures.slashCommand && slashOpen && (\n <div className=\"absolute left-4 top-16 z-20 w-56 rounded-lg border border-gray-200 bg-white p-2 shadow-lg\">\n <button\n type=\"button\"\n className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\"\n onClick={() => {\n editor.chain().focus().toggleHeading({ level: 1 }).run();\n setSlashOpen(false);\n }}\n >\n Heading 1\n </button>\n <button\n type=\"button\"\n className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\"\n onClick={() => {\n editor.chain().focus().toggleBulletList().run();\n setSlashOpen(false);\n }}\n >\n Bullet List\n </button>\n <button\n type=\"button\"\n className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\"\n onClick={() => {\n editor.chain().focus().toggleCodeBlock().run();\n setSlashOpen(false);\n }}\n >\n Code Block\n </button>\n </div>\n )}\n\n {/* Editor */}\n <EditorContent\n editor={editor}\n className={`w-full min-h-[300px] focus-within:bg-white ${editorClassName}`.trim()}\n />\n </div>\n );\n};\n\nexport default TextEditor;\n"],"names":["_a","_b","initialContent","onUpdate","features","_c","stickyToolbar","_d","toolbarPreset","onImageUpload","_e","className","_f","editorClassName","_g","contentClassName","enabledFeatures","React","useMemo","withDefaultFeatures","toolbarPresetFeatures","_h","useState","slashOpen","setSlashOpen","_j","bubblePos","setBubblePos","editor","useEditor","extensions","createTextEditorExtensions","content","getHTML","editorProps","attributes","class","editorContentClassName","concat","trim","handleKeyDown","_view","event","slashCommand","key","immediatelyRender","useEffect","updateBubble","state","selection","from","to","isFocused","window","getSelection","rangeCount","rect","getRangeAt","getBoundingClientRect","top","scrollY","left","scrollX","width","onBlur","on","off","lastAppliedInitialContentRef","useRef","current","commands","setContent","emitUpdate","hasAnyMainTools","heading","formatting","lists","code","quote","link","table","image","taskList","alignment","_jsxs","children","history","_jsx","HistoryTools","ToolbarDivider","HeadingSelect","value","isActive","level","onChange","chain","focus","setParagraph","run","toggleHeading","FormattingTools","AlignmentTools","ListTools","CodeTools","QuoteTools","LinkPopover","TableTools","ImagePopover","InsertTools","style","type","onClick","toggleBulletList","toggleCodeBlock","EditorContent"],"mappings":"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"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./components/Button/Button.js"),o=require("./components/Button/ExportButton.js"),t=require("./components/Cards/Card.js"),r=require("./components/Cards/EmptyStateCard.js"),n=require("./components/Form/CheckBox/CheckBox.js"),s=require("./components/Form/FileUpload/FileUpload.js"),p=require("./components/Form/Input/Input.js"),a=require("./components/Form/Input/InputWithPrefix.js"),l=require("./components/Form/Input/TagInput.js"),i=require("./components/Form/Input/DateTimePicker.js"),x=require("./components/Form/Search/Search.js"),u=require("./components/Form/Select/Select.js"),m=require("./components/Form/
|
|
1
|
+
"use strict";var e=require("./components/Button/Button.js"),o=require("./components/Button/ExportButton.js"),t=require("./components/Cards/Card.js"),r=require("./components/Cards/EmptyStateCard.js"),n=require("./components/Form/CheckBox/CheckBox.js"),s=require("./components/Form/FileUpload/FileUpload.js"),p=require("./components/Form/Input/Input.js"),a=require("./components/Form/Input/InputWithPrefix.js"),l=require("./components/Form/Input/TagInput.js"),i=require("./components/Form/Input/DateTimePicker.js"),x=require("./components/Form/Search/Search.js"),u=require("./components/Form/Select/Select.js"),m=require("./components/Form/Select/SelectButton.js"),S=require("./components/Alert/AlertContext.js"),c=require("./components/Alert/ConfirmationAlert.js"),d=require("./components/Modal/Modal.js"),T=require("./components/Table/Table.js"),k=require("./components/Table/Pagination.js"),E=require("./components/Table/TableSkeleton.js"),j=require("./components/Table/TableDropdown.js"),q=require("./components/SkeletonLoader/index.js"),B=require("./components/Loading/Loading.js"),L=require("./components/Breadcrumb/Breadcrumb.js"),C=require("./components/Tooltip/Tooltip.js"),g=require("./components/Badge/Badge.js"),A=require("./components/Document/FileView.js"),D=require("./components/SkeletonLoader/SkeletonLoader.js");exports.Button=e,exports.ExportButton=o.default,exports.Card=t,exports.EmptyStateCard=r,exports.CheckBox=n.default,exports.CheckBoxDemo=n.CheckBoxDemo,exports.RadioGroup=n.RadioGroup,exports.FileUpload=s,exports.Input=p,exports.InputWithPrefix=a,exports.TagInput=l.default,exports.TagInputDemo=l.TagInputDemo,exports.DateTimePicker=i.default,exports.DateTimePickerDemo=i.DateTimePickerDemo,exports.Search=x,exports.Select=u,exports.SelectButton=m,exports.AlertContext=S.AlertContext,exports.AlertProvider=S.AlertProvider,exports.alert=S.default,exports.useAlert=S.useAlert,exports.ConfirmationAlert=c,exports.Modal=d.default,exports.ModalExample=d.ModalExample,exports.Table=T,exports.Pagination=k.Pagination,exports.TableSkeleton=E.TableSkeleton,exports.TableDropdown=j,exports.SKELETON_LOADER_VERSION=q.SKELETON_LOADER_VERSION,exports.SKELETON_PATTERNS=q.SKELETON_PATTERNS,exports.SKELETON_PRESETS=q.SKELETON_PRESETS,exports.Loading=B.default,exports.LoadingDemo=B.LoadingDemo,exports.Breadcrumb=L,exports.Tooltip=C,exports.Badge=g,exports.FileView=A,exports.CardStatsSkeleton=D.CardStatsSkeleton,exports.SkeletonAvatar=D.SkeletonAvatar,exports.SkeletonButton=D.SkeletonButton,exports.SkeletonCard=D.SkeletonCard,exports.SkeletonImage=D.SkeletonImage,exports.SkeletonList=D.SkeletonList,exports.SkeletonLoader=D.default,exports.SkeletonLoaderExample=D.SkeletonLoaderExample,exports.SkeletonProfile=D.SkeletonProfile,exports.SkeletonTable=D.SkeletonTable,exports.SkeletonText=D.SkeletonText;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-editor.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.mjs";import{jsx as t,jsxs as o}from"react/jsx-runtime";import i from"react";import{useEditor as n,EditorContent as
|
|
1
|
+
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.mjs";import{jsx as t,jsxs as o}from"react/jsx-runtime";import i from"react";import{useEditor as n,EditorContent as a}from"@tiptap/react";import l from"./ImagePopover.mjs";import r from"./LinkPopover.mjs";import{HistoryTools as s,FormattingTools as d,AlignmentTools as c,ListTools as u,CodeTools as m,QuoteTools as g,TableTools as f,InsertTools as p}from"./ToolbarGroups.mjs";import{withDefaultFeatures as b,toolbarPresetFeatures as h,editorContentClassName as v,createTextEditorExtensions as k}from"./extensions.mjs";import{ToolbarDivider as y,HeadingSelect as w}from"./toolbar.mjs";var x=function(x){var L=x.initialContent,C=void 0===L?"":L,N=x.onUpdate,q=x.features,j=x.stickyToolbar,U=void 0===j||j,B=x.toolbarPreset,H=void 0===B?"standard":B,P=x.onImageUpload,A=x.className,R=void 0===A?"":A,T=x.editorClassName,z=void 0===T?"":T,E=x.contentClassName,I=void 0===E?"":E,M=i.useMemo((function(){return b(e(e({},h[H]),q))}),[q,H]),S=i.useState(!1),D=S[0],F=S[1],G=i.useState(null),K=G[0],X=G[1],Y=n({extensions:k(M),content:C,onUpdate:function(e){var t=e.editor;N(t.getHTML())},editorProps:{attributes:{class:"".concat(v," ").concat(I).trim()},handleKeyDown:function(e,t){return!!M.slashCommand&&("/"===t.key?(F(!0),!1):("Escape"===t.key&&F(!1),!1))}},immediatelyRender:!1});i.useEffect((function(){if(Y){var e=function(){var e=Y.state.selection;if(e.from!==e.to&&Y.isFocused){var t=window.getSelection();if(t&&0!==t.rangeCount){var o=t.getRangeAt(0).getBoundingClientRect();X({top:o.top+window.scrollY-48,left:o.left+window.scrollX+o.width/2})}else X(null)}else X(null)},t=function(){return X(null)};return Y.on("selectionUpdate",e),Y.on("blur",t),function(){Y.off("selectionUpdate",e),Y.off("blur",t)}}}),[Y]);var _=i.useRef(C);i.useEffect((function(){Y&&(C!==_.current&&Y.getHTML()===_.current&&(Y.commands.setContent(C||"",{emitUpdate:!1}),_.current=C))}),[Y,C]);var J=M.heading||M.formatting||M.lists||M.code||M.quote||M.link||M.table||M.image||M.taskList||M.alignment;return Y?o("div",{className:"pd-text-editor w-full rounded-lg border border-gray-200 shadow-sm ".concat(R).trim(),children:[U&&o("div",{className:"sticky top-0 z-10 flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3",children:[M.history&&t(s,{editor:Y}),M.history&&J&&t(y,{}),M.heading&&t(w,{value:(null==Y?void 0:Y.isActive("heading",{level:1}))?1:(null==Y?void 0:Y.isActive("heading",{level:2}))?2:(null==Y?void 0:Y.isActive("heading",{level:3}))?3:0,onChange:function(e){0===e?Y.chain().focus().setParagraph().run():Y.chain().focus().toggleHeading({level:e}).run()}}),M.heading&&(M.formatting||M.lists||M.code||M.quote||M.link||M.table||M.image||M.taskList)&&t(y,{}),M.formatting&&t(d,{editor:Y}),M.formatting&&(M.alignment||M.lists||M.code||M.quote||M.link||M.table||M.image||M.taskList)&&t(y,{}),M.alignment&&t(c,{editor:Y}),M.alignment&&(M.lists||M.code||M.quote||M.link||M.table||M.image||M.taskList)&&t(y,{}),M.lists&&t(u,{editor:Y}),M.lists&&(M.code||M.quote||M.link||M.table||M.image||M.taskList)&&t(y,{}),M.code&&t(m,{editor:Y}),M.code&&(M.quote||M.link||M.table||M.image||M.taskList)&&t(y,{}),M.quote&&t(g,{editor:Y}),M.quote&&(M.link||M.table||M.image||M.taskList)&&t(y,{}),M.link&&t(r,{editor:Y}),M.link&&(M.table||M.image||M.taskList)&&t(y,{}),M.table&&t(f,{editor:Y}),M.table&&(M.image||M.taskList)&&t(y,{}),M.image&&t(l,{editor:Y,onImageUpload:P}),M.image&&M.taskList&&t(y,{}),M.taskList&&t(p,{editor:Y})]}),!1===U&&K&&o("div",{className:"fixed z-20 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-1 shadow-lg",style:{top:K.top,left:K.left},children:[t(d,{editor:Y}),M.link&&t(r,{editor:Y})]}),M.slashCommand&&D&&o("div",{className:"absolute left-4 top-16 z-20 w-56 rounded-lg border border-gray-200 bg-white p-2 shadow-lg",children:[t("button",{type:"button",className:"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100",onClick:function(){Y.chain().focus().toggleHeading({level:1}).run(),F(!1)},children:"Heading 1"}),t("button",{type:"button",className:"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100",onClick:function(){Y.chain().focus().toggleBulletList().run(),F(!1)},children:"Bullet List"}),t("button",{type:"button",className:"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100",onClick:function(){Y.chain().focus().toggleCodeBlock().run(),F(!1)},children:"Code Block"})]}),t(a,{editor:Y,className:"w-full min-h-[300px] focus-within:bg-white ".concat(z).trim()})]}):t("div",{className:"rounded-lg border bg-gray-50 h-48 animate-pulse"})};export{x as default};
|
|
2
2
|
//# sourceMappingURL=TextEditor.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.mjs","sources":["../../../../../src/components/Form/TextEditor/TextEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport ImagePopover from \"./ImagePopover\";\nimport LinkPopover from \"./LinkPopover\";\nimport { AlignmentTools, CodeTools, FormattingTools, HistoryTools, InsertTools, ListTools, QuoteTools, TableTools } from \"./ToolbarGroups\";\nimport { createTextEditorExtensions, editorContentClassName, type TextEditorFeatures, type ToolbarPreset, toolbarPresetFeatures, withDefaultFeatures } from \"./extensions\";\nimport { HeadingLevel, HeadingSelect, ToolbarDivider } from \"./toolbar\";\n\nexport interface TextEditorProps {\n initialContent?: string;\n onUpdate: (content: string) => void;\n features?: TextEditorFeatures;\n stickyToolbar?: boolean;\n toolbarPreset?: ToolbarPreset;\n onImageUpload?: (file: File) => Promise<{ url: string; assetId?: string }>;\n}\n\nconst TextEditor: React.FC<TextEditorProps> = ({ initialContent = \"\", onUpdate, features, stickyToolbar = true, toolbarPreset = \"standard\", onImageUpload }) => {\n const enabledFeatures = React.useMemo(() => withDefaultFeatures({ ...toolbarPresetFeatures[toolbarPreset], ...features }), [features, toolbarPreset]);\n const [slashOpen, setSlashOpen] = React.useState(false);\n const [bubblePos, setBubblePos] = React.useState<{ top: number; left: number } | null>(null);\n\n const editor = useEditor({\n extensions: createTextEditorExtensions(enabledFeatures),\n content: initialContent,\n onUpdate: ({ editor }) => {\n onUpdate(editor.getHTML());\n },\n editorProps: {\n attributes: {\n class: editorContentClassName,\n },\n handleKeyDown: (_view, event) => {\n if (!enabledFeatures.slashCommand) return false;\n if (event.key === \"/\") {\n setSlashOpen(true);\n return false;\n }\n if (event.key === \"Escape\") {\n setSlashOpen(false);\n }\n return false;\n },\n },\n immediatelyRender: false,\n });\n\n React.useEffect(() => {\n if (!editor) return;\n const updateBubble = () => {\n const { from, to } = editor.state.selection;\n if (from === to || !editor.isFocused) {\n setBubblePos(null);\n return;\n }\n const selection = window.getSelection();\n if (!selection || selection.rangeCount === 0) {\n setBubblePos(null);\n return;\n }\n const rect = selection.getRangeAt(0).getBoundingClientRect();\n setBubblePos({ top: rect.top + window.scrollY - 48, left: rect.left + window.scrollX + rect.width / 2 });\n };\n const onBlur = () => setBubblePos(null);\n editor.on(\"selectionUpdate\", updateBubble);\n editor.on(\"blur\", onBlur);\n return () => {\n editor.off(\"selectionUpdate\", updateBubble);\n editor.off(\"blur\", onBlur);\n };\n }, [editor]);\n\n const lastAppliedInitialContentRef = React.useRef(initialContent);\n\n React.useEffect(() => {\n if (!editor) {\n return;\n }\n\n if (initialContent === lastAppliedInitialContentRef.current) {\n return;\n }\n\n const currentContent = editor.getHTML();\n const wasUntouchedSinceLastSync = currentContent === lastAppliedInitialContentRef.current;\n\n if (!wasUntouchedSinceLastSync) {\n return;\n }\n\n editor.commands.setContent(initialContent || \"\", { emitUpdate: false });\n lastAppliedInitialContentRef.current = initialContent;\n }, [editor, initialContent]);\n\n const getActiveHeadingLevel = (): HeadingLevel => {\n if (editor?.isActive(\"heading\", { level: 1 })) return 1;\n if (editor?.isActive(\"heading\", { level: 2 })) return 2;\n if (editor?.isActive(\"heading\", { level: 3 })) return 3;\n return 0;\n };\n\n const hasAnyMainTools =\n enabledFeatures.heading ||\n enabledFeatures.formatting ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList ||\n enabledFeatures.alignment;\n\n if (!editor) {\n return <div className=\"rounded-lg border bg-gray-50 h-48 animate-pulse\"></div>;\n }\n\n return (\n <div className='pd-text-editor w-full rounded-lg border border-gray-200 shadow-sm'>\n {/* Toolbar */}\n <div className={`flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3 ${stickyToolbar ? \"sticky top-0 z-10\" : \"\"}`}>\n {/* Undo/Redo */}\n {enabledFeatures.history && <HistoryTools editor={editor} />}\n\n {enabledFeatures.history && hasAnyMainTools && <ToolbarDivider />}\n\n {/* Headings */}\n {enabledFeatures.heading && <HeadingSelect value={getActiveHeadingLevel()} onChange={(level) => {\n if (level === 0) editor.chain().focus().setParagraph().run();\n else editor.chain().focus().toggleHeading({ level }).run();\n }} />}\n\n {enabledFeatures.heading && (enabledFeatures.formatting || enabledFeatures.lists || enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.formatting && <FormattingTools editor={editor} />}\n\n {enabledFeatures.formatting && (enabledFeatures.alignment || enabledFeatures.lists || enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.alignment && <AlignmentTools editor={editor} />}\n\n {enabledFeatures.alignment && (enabledFeatures.lists || enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.lists && <ListTools editor={editor} />}\n\n {enabledFeatures.lists && (enabledFeatures.code || enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.code && <CodeTools editor={editor} />}\n\n {enabledFeatures.code && (enabledFeatures.quote || enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.quote && <QuoteTools editor={editor} />}\n\n {enabledFeatures.quote && (enabledFeatures.link || enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {/* Link */}\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n\n {enabledFeatures.link && (enabledFeatures.table || enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.table && <TableTools editor={editor} />}\n\n {enabledFeatures.table && (enabledFeatures.image || enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.image && <ImagePopover editor={editor} onImageUpload={onImageUpload} />}\n\n {enabledFeatures.image && enabledFeatures.taskList && <ToolbarDivider />}\n\n {enabledFeatures.taskList && <InsertTools editor={editor} />}\n </div>\n\n {stickyToolbar === false && bubblePos && (\n <div className=\"fixed z-20 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-1 shadow-lg\" style={{ top: bubblePos.top, left: bubblePos.left }}>\n <FormattingTools editor={editor} />\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n </div>\n )}\n\n {enabledFeatures.slashCommand && slashOpen && (\n <div className=\"absolute left-4 top-16 z-20 w-56 rounded-lg border border-gray-200 bg-white p-2 shadow-lg\">\n <button type=\"button\" className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\" onClick={() => { editor.chain().focus().toggleHeading({ level: 1 }).run(); setSlashOpen(false); }}>Heading 1</button>\n <button type=\"button\" className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\" onClick={() => { editor.chain().focus().toggleBulletList().run(); setSlashOpen(false); }}>Bullet List</button>\n <button type=\"button\" className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\" onClick={() => { editor.chain().focus().toggleCodeBlock().run(); setSlashOpen(false); }}>Code Block</button>\n </div>\n )}\n\n {/* Editor */}\n <EditorContent\n editor={editor}\n className='w-full min-h-[300px] focus-within:bg-white'\n />\n </div>\n );\n};\n\nexport default TextEditor;\n"],"names":["TextEditor","_a","_b","initialContent","onUpdate","features","_c","stickyToolbar","_d","toolbarPreset","onImageUpload","enabledFeatures","React","useMemo","withDefaultFeatures","__assign","toolbarPresetFeatures","_e","useState","slashOpen","setSlashOpen","_f","bubblePos","setBubblePos","editor","useEditor","extensions","createTextEditorExtensions","content","getHTML","editorProps","attributes","class","editorContentClassName","handleKeyDown","_view","event","slashCommand","key","immediatelyRender","useEffect","updateBubble","state","selection","from","to","isFocused","window","getSelection","rangeCount","rect","getRangeAt","getBoundingClientRect","top","scrollY","left","scrollX","width","onBlur","on","off","lastAppliedInitialContentRef","useRef","current","commands","setContent","emitUpdate","hasAnyMainTools","heading","formatting","lists","code","quote","link","table","image","taskList","alignment","_jsxs","className","children","concat","history","_jsx","HistoryTools","ToolbarDivider","HeadingSelect","value","isActive","level","onChange","chain","focus","setParagraph","run","toggleHeading","FormattingTools","AlignmentTools","ListTools","CodeTools","QuoteTools","LinkPopover","TableTools","ImagePopover","InsertTools","style","type","onClick","toggleBulletList","toggleCodeBlock","EditorContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextEditor.mjs","sources":["../../../../../src/components/Form/TextEditor/TextEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport ImagePopover from \"./ImagePopover\";\nimport LinkPopover from \"./LinkPopover\";\nimport {\n AlignmentTools,\n CodeTools,\n FormattingTools,\n HistoryTools,\n InsertTools,\n ListTools,\n QuoteTools,\n TableTools,\n} from \"./ToolbarGroups\";\nimport {\n createTextEditorExtensions,\n editorContentClassName,\n type TextEditorFeatures,\n type ToolbarPreset,\n toolbarPresetFeatures,\n withDefaultFeatures,\n} from \"./extensions\";\nimport { HeadingLevel, HeadingSelect, ToolbarDivider } from \"./toolbar\";\n\nexport interface TextEditorProps {\n initialContent?: string;\n onUpdate: (content: string) => void;\n features?: TextEditorFeatures;\n stickyToolbar?: boolean;\n toolbarPreset?: ToolbarPreset;\n onImageUpload?: (file: File) => Promise<{ url: string; assetId?: string }>;\n className?: string;\n editorClassName?: string;\n contentClassName?: string;\n}\n\nconst TextEditor: React.FC<TextEditorProps> = ({\n initialContent = \"\",\n onUpdate,\n features,\n stickyToolbar = true,\n toolbarPreset = \"standard\",\n onImageUpload,\n className = \"\",\n editorClassName = \"\",\n contentClassName = \"\",\n}) => {\n const enabledFeatures = React.useMemo(\n () =>\n withDefaultFeatures({\n ...toolbarPresetFeatures[toolbarPreset],\n ...features,\n }),\n [features, toolbarPreset],\n );\n const [slashOpen, setSlashOpen] = React.useState(false);\n const [bubblePos, setBubblePos] = React.useState<{\n top: number;\n left: number;\n } | null>(null);\n\n const editor = useEditor({\n extensions: createTextEditorExtensions(enabledFeatures),\n content: initialContent,\n onUpdate: ({ editor }) => {\n onUpdate(editor.getHTML());\n },\n editorProps: {\n attributes: {\n class: `${editorContentClassName} ${contentClassName}`.trim(),\n },\n handleKeyDown: (_view, event) => {\n if (!enabledFeatures.slashCommand) return false;\n if (event.key === \"/\") {\n setSlashOpen(true);\n return false;\n }\n if (event.key === \"Escape\") {\n setSlashOpen(false);\n }\n return false;\n },\n },\n immediatelyRender: false,\n });\n\n React.useEffect(() => {\n if (!editor) return;\n const updateBubble = () => {\n const { from, to } = editor.state.selection;\n if (from === to || !editor.isFocused) {\n setBubblePos(null);\n return;\n }\n const selection = window.getSelection();\n if (!selection || selection.rangeCount === 0) {\n setBubblePos(null);\n return;\n }\n const rect = selection.getRangeAt(0).getBoundingClientRect();\n setBubblePos({\n top: rect.top + window.scrollY - 48,\n left: rect.left + window.scrollX + rect.width / 2,\n });\n };\n const onBlur = () => setBubblePos(null);\n editor.on(\"selectionUpdate\", updateBubble);\n editor.on(\"blur\", onBlur);\n return () => {\n editor.off(\"selectionUpdate\", updateBubble);\n editor.off(\"blur\", onBlur);\n };\n }, [editor]);\n\n const lastAppliedInitialContentRef = React.useRef(initialContent);\n\n React.useEffect(() => {\n if (!editor) {\n return;\n }\n\n if (initialContent === lastAppliedInitialContentRef.current) {\n return;\n }\n\n const currentContent = editor.getHTML();\n const wasUntouchedSinceLastSync =\n currentContent === lastAppliedInitialContentRef.current;\n\n if (!wasUntouchedSinceLastSync) {\n return;\n }\n\n editor.commands.setContent(initialContent || \"\", { emitUpdate: false });\n lastAppliedInitialContentRef.current = initialContent;\n }, [editor, initialContent]);\n\n const getActiveHeadingLevel = (): HeadingLevel => {\n if (editor?.isActive(\"heading\", { level: 1 })) return 1;\n if (editor?.isActive(\"heading\", { level: 2 })) return 2;\n if (editor?.isActive(\"heading\", { level: 3 })) return 3;\n return 0;\n };\n\n const hasAnyMainTools =\n enabledFeatures.heading ||\n enabledFeatures.formatting ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList ||\n enabledFeatures.alignment;\n\n if (!editor) {\n return (\n <div className=\"rounded-lg border bg-gray-50 h-48 animate-pulse\"></div>\n );\n }\n\n return (\n <div\n className={`pd-text-editor w-full rounded-lg border border-gray-200 shadow-sm ${className}`.trim()}\n >\n {stickyToolbar && (\n <div className=\"sticky top-0 z-10 flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3\">\n {enabledFeatures.history && <HistoryTools editor={editor} />}\n\n {enabledFeatures.history && hasAnyMainTools && <ToolbarDivider />}\n\n {enabledFeatures.heading && (\n <HeadingSelect\n value={getActiveHeadingLevel()}\n onChange={(level) => {\n if (level === 0) editor.chain().focus().setParagraph().run();\n else editor.chain().focus().toggleHeading({ level }).run();\n }}\n />\n )}\n\n {enabledFeatures.heading &&\n (enabledFeatures.formatting ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.formatting && <FormattingTools editor={editor} />}\n\n {enabledFeatures.formatting &&\n (enabledFeatures.alignment ||\n enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.alignment && <AlignmentTools editor={editor} />}\n\n {enabledFeatures.alignment &&\n (enabledFeatures.lists ||\n enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.lists && <ListTools editor={editor} />}\n\n {enabledFeatures.lists &&\n (enabledFeatures.code ||\n enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.code && <CodeTools editor={editor} />}\n\n {enabledFeatures.code &&\n (enabledFeatures.quote ||\n enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.quote && <QuoteTools editor={editor} />}\n\n {enabledFeatures.quote &&\n (enabledFeatures.link ||\n enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n\n {enabledFeatures.link &&\n (enabledFeatures.table ||\n enabledFeatures.image ||\n enabledFeatures.taskList) && <ToolbarDivider />}\n\n {enabledFeatures.table && <TableTools editor={editor} />}\n\n {enabledFeatures.table &&\n (enabledFeatures.image || enabledFeatures.taskList) && (\n <ToolbarDivider />\n )}\n\n {enabledFeatures.image && (\n <ImagePopover editor={editor} onImageUpload={onImageUpload} />\n )}\n\n {enabledFeatures.image && enabledFeatures.taskList && (\n <ToolbarDivider />\n )}\n\n {enabledFeatures.taskList && <InsertTools editor={editor} />}\n </div>\n )}\n\n {stickyToolbar === false && bubblePos && (\n <div\n className=\"fixed z-20 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-1 shadow-lg\"\n style={{ top: bubblePos.top, left: bubblePos.left }}\n >\n <FormattingTools editor={editor} />\n {enabledFeatures.link && <LinkPopover editor={editor} />}\n </div>\n )}\n\n {enabledFeatures.slashCommand && slashOpen && (\n <div className=\"absolute left-4 top-16 z-20 w-56 rounded-lg border border-gray-200 bg-white p-2 shadow-lg\">\n <button\n type=\"button\"\n className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\"\n onClick={() => {\n editor.chain().focus().toggleHeading({ level: 1 }).run();\n setSlashOpen(false);\n }}\n >\n Heading 1\n </button>\n <button\n type=\"button\"\n className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\"\n onClick={() => {\n editor.chain().focus().toggleBulletList().run();\n setSlashOpen(false);\n }}\n >\n Bullet List\n </button>\n <button\n type=\"button\"\n className=\"block w-full rounded px-2 py-1 text-left text-sm hover:bg-gray-100\"\n onClick={() => {\n editor.chain().focus().toggleCodeBlock().run();\n setSlashOpen(false);\n }}\n >\n Code Block\n </button>\n </div>\n )}\n\n {/* Editor */}\n <EditorContent\n editor={editor}\n className={`w-full min-h-[300px] focus-within:bg-white ${editorClassName}`.trim()}\n />\n </div>\n );\n};\n\nexport default TextEditor;\n"],"names":["TextEditor","_a","_b","initialContent","onUpdate","features","_c","stickyToolbar","_d","toolbarPreset","onImageUpload","_e","className","_f","editorClassName","_g","contentClassName","enabledFeatures","React","useMemo","withDefaultFeatures","toolbarPresetFeatures","_h","useState","slashOpen","setSlashOpen","_j","bubblePos","setBubblePos","editor","useEditor","extensions","createTextEditorExtensions","content","getHTML","editorProps","attributes","class","editorContentClassName","concat","trim","handleKeyDown","_view","event","slashCommand","key","immediatelyRender","useEffect","updateBubble","state","selection","from","to","isFocused","window","getSelection","rangeCount","rect","getRangeAt","getBoundingClientRect","top","scrollY","left","scrollX","width","onBlur","on","off","lastAppliedInitialContentRef","useRef","current","commands","setContent","emitUpdate","hasAnyMainTools","heading","formatting","lists","code","quote","link","table","image","taskList","alignment","_jsxs","children","history","_jsx","HistoryTools","ToolbarDivider","HeadingSelect","value","isActive","level","onChange","chain","focus","setParagraph","run","toggleHeading","FormattingTools","AlignmentTools","ListTools","CodeTools","QuoteTools","LinkPopover","TableTools","ImagePopover","InsertTools","style","type","onClick","toggleBulletList","toggleCodeBlock","EditorContent"],"mappings":"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"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as Button}from"./components/Button/Button.mjs";export{default as ExportButton}from"./components/Button/ExportButton.mjs";export{default as Card}from"./components/Cards/Card.mjs";export{default as EmptyStateCard}from"./components/Cards/EmptyStateCard.mjs";export{default as CheckBox,CheckBoxDemo,RadioGroup}from"./components/Form/CheckBox/CheckBox.mjs";export{default as FileUpload}from"./components/Form/FileUpload/FileUpload.mjs";export{default as Input}from"./components/Form/Input/Input.mjs";export{default as InputWithPrefix}from"./components/Form/Input/InputWithPrefix.mjs";export{default as TagInput,TagInputDemo}from"./components/Form/Input/TagInput.mjs";export{default as DateTimePicker,DateTimePickerDemo}from"./components/Form/Input/DateTimePicker.mjs";export{default as Search}from"./components/Form/Search/Search.mjs";export{default as Select}from"./components/Form/Select/Select.mjs";export{default as
|
|
1
|
+
export{default as Button}from"./components/Button/Button.mjs";export{default as ExportButton}from"./components/Button/ExportButton.mjs";export{default as Card}from"./components/Cards/Card.mjs";export{default as EmptyStateCard}from"./components/Cards/EmptyStateCard.mjs";export{default as CheckBox,CheckBoxDemo,RadioGroup}from"./components/Form/CheckBox/CheckBox.mjs";export{default as FileUpload}from"./components/Form/FileUpload/FileUpload.mjs";export{default as Input}from"./components/Form/Input/Input.mjs";export{default as InputWithPrefix}from"./components/Form/Input/InputWithPrefix.mjs";export{default as TagInput,TagInputDemo}from"./components/Form/Input/TagInput.mjs";export{default as DateTimePicker,DateTimePickerDemo}from"./components/Form/Input/DateTimePicker.mjs";export{default as Search}from"./components/Form/Search/Search.mjs";export{default as Select}from"./components/Form/Select/Select.mjs";export{default as SelectButton}from"./components/Form/Select/SelectButton.mjs";export{AlertContext,AlertProvider,default as alert,useAlert}from"./components/Alert/AlertContext.mjs";export{default as ConfirmationAlert}from"./components/Alert/ConfirmationAlert.mjs";export{default as Modal,ModalExample}from"./components/Modal/Modal.mjs";export{default as Table}from"./components/Table/Table.mjs";export{Pagination}from"./components/Table/Pagination.mjs";export{TableSkeleton}from"./components/Table/TableSkeleton.mjs";export{default as TableDropdown}from"./components/Table/TableDropdown.mjs";export{SKELETON_LOADER_VERSION,SKELETON_PATTERNS,SKELETON_PRESETS}from"./components/SkeletonLoader/index.mjs";export{default as Loading,LoadingDemo}from"./components/Loading/Loading.mjs";export{default as Breadcrumb}from"./components/Breadcrumb/Breadcrumb.mjs";export{default as Tooltip}from"./components/Tooltip/Tooltip.mjs";export{default as Badge}from"./components/Badge/Badge.mjs";export{default as FileView}from"./components/Document/FileView.mjs";export{CardStatsSkeleton,SkeletonAvatar,SkeletonButton,SkeletonCard,SkeletonImage,SkeletonList,default as SkeletonLoader,SkeletonLoaderExample,SkeletonProfile,SkeletonTable,SkeletonText}from"./components/SkeletonLoader/SkeletonLoader.mjs";
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-editor.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
|
@@ -270,36 +270,6 @@ type SelectProps = {
|
|
|
270
270
|
};
|
|
271
271
|
declare function Select({ options, placeholder, onChange, value, size, className, name, id, disabled, label, required, error, helpText, fullWidth, searchable, onSearch, isSearching, searchDebounceMs, multiple, maxSelected, showSelectedCount, closeOnSelect, showSelectAll, }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
272
272
|
|
|
273
|
-
interface TextEditorFeatures {
|
|
274
|
-
heading?: boolean;
|
|
275
|
-
formatting?: boolean;
|
|
276
|
-
lists?: boolean;
|
|
277
|
-
code?: boolean;
|
|
278
|
-
quote?: boolean;
|
|
279
|
-
link?: boolean;
|
|
280
|
-
history?: boolean;
|
|
281
|
-
placeholder?: boolean;
|
|
282
|
-
slashCommand?: boolean;
|
|
283
|
-
table?: boolean;
|
|
284
|
-
image?: boolean;
|
|
285
|
-
taskList?: boolean;
|
|
286
|
-
alignment?: boolean;
|
|
287
|
-
}
|
|
288
|
-
type ToolbarPreset = "minimal" | "standard" | "full";
|
|
289
|
-
|
|
290
|
-
interface TextEditorProps {
|
|
291
|
-
initialContent?: string;
|
|
292
|
-
onUpdate: (content: string) => void;
|
|
293
|
-
features?: TextEditorFeatures;
|
|
294
|
-
stickyToolbar?: boolean;
|
|
295
|
-
toolbarPreset?: ToolbarPreset;
|
|
296
|
-
onImageUpload?: (file: File) => Promise<{
|
|
297
|
-
url: string;
|
|
298
|
-
assetId?: string;
|
|
299
|
-
}>;
|
|
300
|
-
}
|
|
301
|
-
declare const TextEditor: React$1.FC<TextEditorProps>;
|
|
302
|
-
|
|
303
273
|
type SelectButtonOption = {
|
|
304
274
|
value: string;
|
|
305
275
|
label?: string;
|
|
@@ -651,5 +621,5 @@ interface BadgeProps {
|
|
|
651
621
|
}
|
|
652
622
|
declare const Badge: React$1.FC<BadgeProps>;
|
|
653
623
|
|
|
654
|
-
export { AlertContext, AlertProvider, Badge, Breadcrumb, Button, Card, CardStatsSkeleton, CheckBox, CheckBoxDemo, ConfirmationAlert, DateTimePicker, DateTimePickerDemo, EmptyStateCard, ExportButton, ExportFormatEnum, FileUpload, FileView, Input, InputWithPrefix, Loading, LoadingDemo, Modal, ModalExample, Pagination, RadioGroup, SKELETON_LOADER_VERSION, SKELETON_PATTERNS, SKELETON_PRESETS, Search, Select, SelectButton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonImage, SkeletonList, SkeletonLoader, SkeletonLoaderExample, SkeletonProfile, SkeletonTable, SkeletonText, Table, TableDropdown, TableSkeleton, TagInput, TagInputDemo,
|
|
655
|
-
export type { AlertContextProps, AlertItem, AlertProps, AlertType, BadgeProps, BadgeVariant, BreadcrumbItem, BreadcrumbProps, ButtonProps, CheckBoxProps, Column, ConfirmationPopupProps, ConfirmationType, DateTimePickerProps, DateTimeValue, EmptyStateProps, FileItem, FileUploadProps, FileViewProps, InputElement, InputProps, InputWithPrefixProps, LoadingProps, ModalProps, PaginationProps, RadioGroupProps, SearchProps, SelectButtonOption, SelectButtonProps, SelectOption, SelectProps, SkeletonAnimation, SkeletonLoaderModule, SkeletonLoaderProps, SkeletonSize, SkeletonVariant, TableDropdownProps, TableProps, Tag, TagInputProps,
|
|
624
|
+
export { AlertContext, AlertProvider, Badge, Breadcrumb, Button, Card, CardStatsSkeleton, CheckBox, CheckBoxDemo, ConfirmationAlert, DateTimePicker, DateTimePickerDemo, EmptyStateCard, ExportButton, ExportFormatEnum, FileUpload, FileView, Input, InputWithPrefix, Loading, LoadingDemo, Modal, ModalExample, Pagination, RadioGroup, SKELETON_LOADER_VERSION, SKELETON_PATTERNS, SKELETON_PRESETS, Search, Select, SelectButton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonImage, SkeletonList, SkeletonLoader, SkeletonLoaderExample, SkeletonProfile, SkeletonTable, SkeletonText, Table, TableDropdown, TableSkeleton, TagInput, TagInputDemo, Tooltip, alert, useAlert };
|
|
625
|
+
export type { AlertContextProps, AlertItem, AlertProps, AlertType, BadgeProps, BadgeVariant, BreadcrumbItem, BreadcrumbProps, ButtonProps, CheckBoxProps, Column, ConfirmationPopupProps, ConfirmationType, DateTimePickerProps, DateTimeValue, EmptyStateProps, FileItem, FileUploadProps, FileViewProps, InputElement, InputProps, InputWithPrefixProps, LoadingProps, ModalProps, PaginationProps, RadioGroupProps, SearchProps, SelectButtonOption, SelectButtonProps, SelectOption, SelectProps, SkeletonAnimation, SkeletonLoaderModule, SkeletonLoaderProps, SkeletonSize, SkeletonVariant, TableDropdownProps, TableProps, Tag, TagInputProps, TooltipProps };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface TextEditorFeatures {
|
|
4
|
+
heading?: boolean;
|
|
5
|
+
formatting?: boolean;
|
|
6
|
+
lists?: boolean;
|
|
7
|
+
code?: boolean;
|
|
8
|
+
quote?: boolean;
|
|
9
|
+
link?: boolean;
|
|
10
|
+
history?: boolean;
|
|
11
|
+
placeholder?: boolean;
|
|
12
|
+
slashCommand?: boolean;
|
|
13
|
+
table?: boolean;
|
|
14
|
+
image?: boolean;
|
|
15
|
+
taskList?: boolean;
|
|
16
|
+
alignment?: boolean;
|
|
17
|
+
}
|
|
18
|
+
type ToolbarPreset = "minimal" | "standard" | "full";
|
|
19
|
+
|
|
20
|
+
interface TextEditorProps {
|
|
21
|
+
initialContent?: string;
|
|
22
|
+
onUpdate: (content: string) => void;
|
|
23
|
+
features?: TextEditorFeatures;
|
|
24
|
+
stickyToolbar?: boolean;
|
|
25
|
+
toolbarPreset?: ToolbarPreset;
|
|
26
|
+
onImageUpload?: (file: File) => Promise<{
|
|
27
|
+
url: string;
|
|
28
|
+
assetId?: string;
|
|
29
|
+
}>;
|
|
30
|
+
className?: string;
|
|
31
|
+
editorClassName?: string;
|
|
32
|
+
contentClassName?: string;
|
|
33
|
+
}
|
|
34
|
+
declare const TextEditor: React.FC<TextEditorProps>;
|
|
35
|
+
|
|
36
|
+
export { TextEditor };
|
|
37
|
+
export type { TextEditorProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pillardash-ui-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.151",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Pillardash reusable react components",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -14,6 +14,12 @@
|
|
|
14
14
|
"require": "./dist/cjs/index.js",
|
|
15
15
|
"default": "./dist/esm/index.mjs"
|
|
16
16
|
},
|
|
17
|
+
"./text-editor": {
|
|
18
|
+
"types": "./dist/text-editor.d.ts",
|
|
19
|
+
"import": "./dist/esm/text-editor.mjs",
|
|
20
|
+
"require": "./dist/cjs/text-editor.js",
|
|
21
|
+
"default": "./dist/esm/text-editor.mjs"
|
|
22
|
+
},
|
|
17
23
|
"./styles.css": "./dist/styles.css"
|
|
18
24
|
},
|
|
19
25
|
"sideEffects": [
|