@crashbytes/contentful-richtext-editor 1.0.3 → 1.0.6
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 +158 -125
- package/dist/components/ContentfulEditor.d.ts +4 -0
- package/dist/components/Toolbar.d.ts +2 -0
- package/dist/index.esm.js +65 -59
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +65 -59
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -26531,10 +26531,11 @@ const Underline = Mark.create({
|
|
|
26531
26531
|
},
|
|
26532
26532
|
});
|
|
26533
26533
|
|
|
26534
|
-
const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeatures = [] }) => {
|
|
26534
|
+
const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeatures = [], availableHeadings = [1, 2, 3, 4, 5, 6], availableMarks = ['bold', 'italic', 'underline'] }) => {
|
|
26535
26535
|
const [showLinkInput, setShowLinkInput] = React.useState(false);
|
|
26536
26536
|
const [linkUrl, setLinkUrl] = React.useState('');
|
|
26537
26537
|
const isDisabled = (feature) => disabledFeatures.includes(feature);
|
|
26538
|
+
const isMarkAvailable = (mark) => availableMarks.includes(mark);
|
|
26538
26539
|
const handleHeadingChange = (level) => {
|
|
26539
26540
|
if (level === 0) {
|
|
26540
26541
|
editor.chain().focus().setParagraph().run();
|
|
@@ -26563,14 +26564,15 @@ const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeature
|
|
|
26563
26564
|
editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
|
|
26564
26565
|
};
|
|
26565
26566
|
const getActiveHeading = () => {
|
|
26566
|
-
for (
|
|
26567
|
-
if (editor.isActive('heading', { level
|
|
26568
|
-
return `Heading ${
|
|
26567
|
+
for (const level of availableHeadings) {
|
|
26568
|
+
if (editor.isActive('heading', { level })) {
|
|
26569
|
+
return `Heading ${level}`;
|
|
26569
26570
|
}
|
|
26570
26571
|
}
|
|
26571
26572
|
return 'Normal text';
|
|
26572
26573
|
};
|
|
26573
|
-
|
|
26574
|
+
const hasHeadings = !isDisabled('headings') && availableHeadings.length > 0;
|
|
26575
|
+
return (jsxRuntime.jsxs("div", { className: "contentful-toolbar", children: [jsxRuntime.jsxs("div", { className: "contentful-toolbar__group", children: [hasHeadings && (jsxRuntime.jsxs("select", { className: "contentful-toolbar__select", value: getActiveHeading(), onChange: (e) => {
|
|
26574
26576
|
const value = e.target.value;
|
|
26575
26577
|
if (value === 'Normal text') {
|
|
26576
26578
|
handleHeadingChange(0);
|
|
@@ -26579,7 +26581,7 @@ const ContentfulToolbar = ({ editor, onEmbedEntry, onEmbedAsset, disabledFeature
|
|
|
26579
26581
|
const level = parseInt(value.replace('Heading ', ''));
|
|
26580
26582
|
handleHeadingChange(level);
|
|
26581
26583
|
}
|
|
26582
|
-
}, children: [jsxRuntime.jsx("option", { value: "Normal text", children: "Normal text" }),
|
|
26584
|
+
}, children: [jsxRuntime.jsx("option", { value: "Normal text", children: "Normal text" }), availableHeadings.map(level => (jsxRuntime.jsxs("option", { value: `Heading ${level}`, children: ["Heading ", level] }, level)))] })), jsxRuntime.jsx("button", { className: "contentful-toolbar__button", onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo", children: "\u21B6" }), jsxRuntime.jsx("button", { className: "contentful-toolbar__button", onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo", children: "\u21B7" })] }), jsxRuntime.jsx("div", { className: "contentful-toolbar__separator" }), jsxRuntime.jsxs("div", { className: "contentful-toolbar__group", children: [!isDisabled('bold') && isMarkAvailable('bold') && (jsxRuntime.jsx("button", { className: `contentful-toolbar__button ${editor.isActive('bold') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleBold().run(), title: "Bold", children: jsxRuntime.jsx("strong", { children: "B" }) })), !isDisabled('italic') && isMarkAvailable('italic') && (jsxRuntime.jsx("button", { className: `contentful-toolbar__button ${editor.isActive('italic') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleItalic().run(), title: "Italic", children: jsxRuntime.jsx("em", { children: "I" }) })), !isDisabled('underline') && isMarkAvailable('underline') && (jsxRuntime.jsx("button", { className: `contentful-toolbar__button ${editor.isActive('underline') ? 'contentful-toolbar__button--active' : ''}`, onClick: () => editor.chain().focus().toggleUnderline().run(), title: "Underline", children: jsxRuntime.jsx("u", { children: "U" }) })), jsxRuntime.jsx("button", { className: "contentful-toolbar__button", title: "More formatting options", children: "\u22EF" }), !isDisabled('link') && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: `contentful-toolbar__button ${editor.isActive('link') ? 'contentful-toolbar__button--active' : ''}`, onClick: handleLinkToggle, title: "Link", children: "\uD83D\uDD17" }), showLinkInput && (jsxRuntime.jsxs("div", { className: "contentful-toolbar__link-input", children: [jsxRuntime.jsx("input", { type: "url", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), placeholder: "Enter URL", onKeyDown: (e) => {
|
|
26583
26585
|
if (e.key === 'Enter') {
|
|
26584
26586
|
handleLinkSubmit();
|
|
26585
26587
|
}
|
|
@@ -27270,59 +27272,63 @@ const createEmptyDocument = () => ({
|
|
|
27270
27272
|
],
|
|
27271
27273
|
});
|
|
27272
27274
|
|
|
27273
|
-
const ContentfulRichTextEditor = ({ initialValue, onChange, onEmbedEntry, onEmbedAsset, className = '', readonly = false, placeholder = 'Start writing...', disabledFeatures = [], theme = 'contentful' }) => {
|
|
27275
|
+
const ContentfulRichTextEditor = ({ initialValue, onChange, onEmbedEntry, onEmbedAsset, className = '', readonly = false, placeholder = 'Start writing...', disabledFeatures = [], theme = 'contentful', availableHeadings = [1, 2, 3, 4, 5, 6], availableMarks = ['bold', 'italic', 'underline'] }) => {
|
|
27276
|
+
// Build extensions array based on available features
|
|
27277
|
+
const extensions = [];
|
|
27278
|
+
// Add StarterKit with configuration
|
|
27279
|
+
extensions.push(StarterKit.configure({
|
|
27280
|
+
heading: {
|
|
27281
|
+
levels: availableHeadings,
|
|
27282
|
+
},
|
|
27283
|
+
bold: availableMarks.includes('bold') ? {} : false,
|
|
27284
|
+
italic: availableMarks.includes('italic') ? {} : false,
|
|
27285
|
+
bulletList: {
|
|
27286
|
+
HTMLAttributes: {
|
|
27287
|
+
class: 'contentful-bullet-list',
|
|
27288
|
+
},
|
|
27289
|
+
},
|
|
27290
|
+
orderedList: {
|
|
27291
|
+
HTMLAttributes: {
|
|
27292
|
+
class: 'contentful-ordered-list',
|
|
27293
|
+
},
|
|
27294
|
+
},
|
|
27295
|
+
blockquote: {
|
|
27296
|
+
HTMLAttributes: {
|
|
27297
|
+
class: 'contentful-blockquote',
|
|
27298
|
+
},
|
|
27299
|
+
},
|
|
27300
|
+
}));
|
|
27301
|
+
// Add underline extension only if it's in availableMarks
|
|
27302
|
+
if (availableMarks.includes('underline')) {
|
|
27303
|
+
extensions.push(Underline);
|
|
27304
|
+
}
|
|
27305
|
+
// Add other extensions
|
|
27306
|
+
extensions.push(Link.configure({
|
|
27307
|
+
openOnClick: false,
|
|
27308
|
+
HTMLAttributes: {
|
|
27309
|
+
class: 'contentful-link',
|
|
27310
|
+
rel: 'noopener noreferrer',
|
|
27311
|
+
},
|
|
27312
|
+
}), Table.configure({
|
|
27313
|
+
resizable: true,
|
|
27314
|
+
HTMLAttributes: {
|
|
27315
|
+
class: 'contentful-table',
|
|
27316
|
+
},
|
|
27317
|
+
}), TableRow.configure({
|
|
27318
|
+
HTMLAttributes: {
|
|
27319
|
+
class: 'contentful-table-row',
|
|
27320
|
+
},
|
|
27321
|
+
}), TableHeader.configure({
|
|
27322
|
+
HTMLAttributes: {
|
|
27323
|
+
class: 'contentful-table-header',
|
|
27324
|
+
},
|
|
27325
|
+
}), TableCell.configure({
|
|
27326
|
+
HTMLAttributes: {
|
|
27327
|
+
class: 'contentful-table-cell',
|
|
27328
|
+
},
|
|
27329
|
+
}));
|
|
27274
27330
|
const editor = useEditor({
|
|
27275
|
-
extensions
|
|
27276
|
-
StarterKit.configure({
|
|
27277
|
-
heading: {
|
|
27278
|
-
levels: [1, 2, 3, 4, 5, 6],
|
|
27279
|
-
},
|
|
27280
|
-
bulletList: {
|
|
27281
|
-
HTMLAttributes: {
|
|
27282
|
-
class: 'contentful-bullet-list',
|
|
27283
|
-
},
|
|
27284
|
-
},
|
|
27285
|
-
orderedList: {
|
|
27286
|
-
HTMLAttributes: {
|
|
27287
|
-
class: 'contentful-ordered-list',
|
|
27288
|
-
},
|
|
27289
|
-
},
|
|
27290
|
-
blockquote: {
|
|
27291
|
-
HTMLAttributes: {
|
|
27292
|
-
class: 'contentful-blockquote',
|
|
27293
|
-
},
|
|
27294
|
-
},
|
|
27295
|
-
}),
|
|
27296
|
-
Underline,
|
|
27297
|
-
Link.configure({
|
|
27298
|
-
openOnClick: false,
|
|
27299
|
-
HTMLAttributes: {
|
|
27300
|
-
class: 'contentful-link',
|
|
27301
|
-
rel: 'noopener noreferrer',
|
|
27302
|
-
},
|
|
27303
|
-
}),
|
|
27304
|
-
Table.configure({
|
|
27305
|
-
resizable: true,
|
|
27306
|
-
HTMLAttributes: {
|
|
27307
|
-
class: 'contentful-table',
|
|
27308
|
-
},
|
|
27309
|
-
}),
|
|
27310
|
-
TableRow.configure({
|
|
27311
|
-
HTMLAttributes: {
|
|
27312
|
-
class: 'contentful-table-row',
|
|
27313
|
-
},
|
|
27314
|
-
}),
|
|
27315
|
-
TableHeader.configure({
|
|
27316
|
-
HTMLAttributes: {
|
|
27317
|
-
class: 'contentful-table-header',
|
|
27318
|
-
},
|
|
27319
|
-
}),
|
|
27320
|
-
TableCell.configure({
|
|
27321
|
-
HTMLAttributes: {
|
|
27322
|
-
class: 'contentful-table-cell',
|
|
27323
|
-
},
|
|
27324
|
-
}),
|
|
27325
|
-
],
|
|
27331
|
+
extensions,
|
|
27326
27332
|
content: initialValue ? contentfulToTiptap(initialValue) : '',
|
|
27327
27333
|
editable: !readonly,
|
|
27328
27334
|
editorProps: {
|
|
@@ -27401,7 +27407,7 @@ const ContentfulRichTextEditor = ({ initialValue, onChange, onEmbedEntry, onEmbe
|
|
|
27401
27407
|
if (!editor) {
|
|
27402
27408
|
return (jsxRuntime.jsx("div", { className: `contentful-editor contentful-editor--loading ${className}`, children: jsxRuntime.jsx("div", { className: "contentful-editor__loading", children: "Loading editor..." }) }));
|
|
27403
27409
|
}
|
|
27404
|
-
return (jsxRuntime.jsxs("div", { className: `contentful-editor contentful-editor--${theme} ${className}`, children: [!readonly && (jsxRuntime.jsx(ContentfulToolbar, { editor: editor, onEmbedEntry: handleEmbedEntry, onEmbedAsset: handleEmbedAsset, disabledFeatures: disabledFeatures })), jsxRuntime.jsx("div", { className: "contentful-editor__content-wrapper", children: jsxRuntime.jsx(EditorContent, { editor: editor, className: "contentful-editor__content" }) })] }));
|
|
27410
|
+
return (jsxRuntime.jsxs("div", { className: `contentful-editor contentful-editor--${theme} ${className}`, children: [!readonly && (jsxRuntime.jsx(ContentfulToolbar, { editor: editor, onEmbedEntry: handleEmbedEntry, onEmbedAsset: handleEmbedAsset, disabledFeatures: disabledFeatures, availableHeadings: availableHeadings, availableMarks: availableMarks })), jsxRuntime.jsx("div", { className: "contentful-editor__content-wrapper", children: jsxRuntime.jsx(EditorContent, { editor: editor, className: "contentful-editor__content" }) })] }));
|
|
27405
27411
|
};
|
|
27406
27412
|
|
|
27407
27413
|
exports.ContentfulRichTextEditor = ContentfulRichTextEditor;
|