krl-alfred 2.23.13 → 2.23.14

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -20,6 +20,8 @@ var react_2 = require("@tiptap/react");
 var starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
 var extension_underline_1 = __importDefault(require("@tiptap/extension-underline"));
 var extension_placeholder_1 = __importDefault(require("@tiptap/extension-placeholder"));
+var extension_table_1 = require("@tiptap/extension-table");
+var simplebar_react_1 = __importDefault(require("simplebar-react"));
 var props_1 = require("./props");
 var RichTextEditor_styled_1 = require("./RichTextEditor.styled");
 var VariableNode_1 = require("./extensions/VariableNode");
@@ -32,8 +34,8 @@ var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({
 var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 var HeadingIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 5v14M18 5v14M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
 var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, _d = _a.description, description = _d === void 0 ? props_1.RichTextEditorDefault.description : _d, value = _a.value, _e = _a.defaultValue, defaultValue = _e === void 0 ? props_1.RichTextEditorDefault.defaultValue : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? props_1.RichTextEditorDefault.disabled : _f, _g = _a.hasError, hasError = _g === void 0 ? props_1.RichTextEditorDefault.hasError : _g, _h = _a.errorMessage, errorMessage = _h === void 0 ? props_1.RichTextEditorDefault.errorMessage : _h, className = _a.className, id = _a.id, _j = _a.minHeight, minHeight = _j === void 0 ? props_1.RichTextEditorDefault.minHeight : _j;
-    var _k = (0, react_1.useState)(false), focused = _k[0], setFocused = _k[1];
+    var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, _d = _a.description, description = _d === void 0 ? props_1.RichTextEditorDefault.description : _d, value = _a.value, _e = _a.defaultValue, defaultValue = _e === void 0 ? props_1.RichTextEditorDefault.defaultValue : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? props_1.RichTextEditorDefault.disabled : _f, _g = _a.hasError, hasError = _g === void 0 ? props_1.RichTextEditorDefault.hasError : _g, _h = _a.errorMessage, errorMessage = _h === void 0 ? props_1.RichTextEditorDefault.errorMessage : _h, className = _a.className, id = _a.id, _j = _a.minHeight, minHeight = _j === void 0 ? props_1.RichTextEditorDefault.minHeight : _j, _k = _a.maxHeight, maxHeight = _k === void 0 ? props_1.RichTextEditorDefault.maxHeight : _k, _l = _a.allowedTags, allowedTags = _l === void 0 ? props_1.RichTextEditorDefault.allowedTags : _l;
+    var _m = (0, react_1.useState)(false), focused = _m[0], setFocused = _m[1];
     var isControlled = value !== undefined;
     var editor = (0, react_2.useEditor)({
         immediatelyRender: false,
@@ -48,6 +50,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
                 horizontalRule: false,
                 dropcursor: false,
                 gapcursor: false,
+                underline: false,
                 hardBreak: {
                     keepMarks: true,
                 },
@@ -57,18 +60,23 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
                 placeholder: placeholder || '',
             }),
             VariableNode_1.VariableNode,
+            // Şema tabloyu her zaman anlar; içerikte gerçekten kalıp kalmaması `allowedTags` (sanitize) ile kontrol edilir
+            extension_table_1.Table.configure({ resizable: false }),
+            extension_table_1.TableRow,
+            extension_table_1.TableHeader,
+            extension_table_1.TableCell,
         ],
-        content: (0, sanitize_1.prepareEditorHtml)(isControlled ? (value || '') : defaultValue),
+        content: (0, sanitize_1.prepareEditorHtml)(isControlled ? (value || '') : defaultValue, allowedTags),
         editable: !disabled,
         editorProps: {
             attributes: __assign(__assign({}, (id ? { id: id } : {})), { 'aria-invalid': hasError ? 'true' : 'false' }),
             transformPastedHTML: function (html) {
-                return (0, sanitize_1.prepareEditorHtml)(html);
+                return (0, sanitize_1.prepareEditorHtml)(html, allowedTags);
             },
         },
         onUpdate: function (_a) {
             var currentEditor = _a.editor;
-            onChange === null || onChange === void 0 ? void 0 : onChange((0, sanitize_1.serializeEditorHtml)(currentEditor.getHTML()));
+            onChange === null || onChange === void 0 ? void 0 : onChange((0, sanitize_1.serializeEditorHtml)(currentEditor.getHTML(), allowedTags));
         },
         onFocus: function () { return setFocused(true); },
         onBlur: function () {
@@ -84,12 +92,12 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     (0, react_1.useEffect)(function () {
         if (!editor || !isControlled)
             return;
-        var nextHtml = (0, sanitize_1.serializeEditorHtml)(value || '');
-        var currentHtml = (0, sanitize_1.serializeEditorHtml)(editor.getHTML());
+        var nextHtml = (0, sanitize_1.serializeEditorHtml)(value || '', allowedTags);
+        var currentHtml = (0, sanitize_1.serializeEditorHtml)(editor.getHTML(), allowedTags);
         if (nextHtml !== currentHtml) {
-            editor.commands.setContent((0, sanitize_1.prepareEditorHtml)(value || ''), { emitUpdate: false });
+            editor.commands.setContent((0, sanitize_1.prepareEditorHtml)(value || '', allowedTags), { emitUpdate: false });
         }
-    }, [value, isControlled, editor]);
+    }, [value, isControlled, editor, allowedTags]);
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         insertVariable: function (variable) {
             if (!editor || disabled)
@@ -99,7 +107,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
                 label: variable.label,
             }).run();
         },
-        getHTML: function () { return (0, sanitize_1.serializeEditorHtml)((editor === null || editor === void 0 ? void 0 : editor.getHTML()) || ''); },
+        getHTML: function () { return (0, sanitize_1.serializeEditorHtml)((editor === null || editor === void 0 ? void 0 : editor.getHTML()) || '', allowedTags); },
         getEditor: function () { return editor; },
         focus: function () {
             editor === null || editor === void 0 ? void 0 : editor.chain().focus().run();
@@ -107,10 +115,10 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
         clear: function () {
             editor === null || editor === void 0 ? void 0 : editor.commands.clearContent(true);
         },
-    }); }, [editor, disabled]);
+    }); }, [editor, disabled, allowedTags]);
     if (!editor)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), description && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldDescription, { children: description }), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: maxHeight ? ((0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ style: { maxHeight: maxHeight } }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))) : ((0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor })) }))] })), description && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldDescription, { children: description }), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
 });
 RichTextEditor.displayName = 'RichTextEditor';
 exports.default = RichTextEditor;

package/dist/components/RichTextEditor/RichTextEditor.styled.js

@@ -15,7 +15,7 @@ exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templ
 exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n    padding: 0 0 1rem;\n    margin: 0 0 1rem;\n    border-bottom: 1px solid var(--grey-10);\n"])));
 exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--dark)' : 'var(--grey-50)'); });
 exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"], ["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"])));
-exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
+exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        .tableWrapper {\n            margin: 0 0 0.75rem;\n            overflow-x: auto;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n        }\n\n        th,\n        td {\n            border: 1px solid var(--grey-10);\n            padding: 0.5rem 0.75rem;\n            text-align: left;\n            vertical-align: top;\n\n            p {\n                margin: 0;\n            }\n        }\n\n        th {\n            background: var(--dark-opacity-3);\n            color: var(--dark);\n            font: var(--caption-bold-12-15);\n        }\n\n        td {\n            font: var(--body-regular-14-17);\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        .tableWrapper {\n            margin: 0 0 0.75rem;\n            overflow-x: auto;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n        }\n\n        th,\n        td {\n            border: 1px solid var(--grey-10);\n            padding: 0.5rem 0.75rem;\n            text-align: left;\n            vertical-align: top;\n\n            p {\n                margin: 0;\n            }\n        }\n\n        th {\n            background: var(--dark-opacity-3);\n            color: var(--dark);\n            font: var(--caption-bold-12-15);\n        }\n\n        td {\n            font: var(--body-regular-14-17);\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
 exports.FieldDescription = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
 exports.ErrorMessage = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
 exports.VariableActions = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));

package/dist/components/RichTextEditor/RichTextEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/RichTextEditor/RichTextEditor.test.js

@@ -0,0 +1,250 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_2 = require("@testing-library/react");
+var RichTextEditor_1 = __importDefault(require("./RichTextEditor"));
+var renderEditor = function (props) {
+    if (props === void 0) { props = {}; }
+    var ref = (0, react_1.createRef)();
+    var utils = (0, react_2.render)((0, jsx_runtime_1.jsx)(RichTextEditor_1.default, __assign({ ref: ref }, props)));
+    return __assign({ ref: ref }, utils);
+};
+var waitForEditor = function () {
+    return (0, react_2.waitFor)(function () { return expect(document.querySelector('.ProseMirror')).toBeInTheDocument(); });
+};
+describe('RichTextEditor', function () {
+    it('renders the field label', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderEditor({ label: 'Mail metni' });
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByText('Mail metni')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not render a scroll container without maxHeight', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderEditor();
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _a.sent();
+                    expect(document.querySelector('[data-simplebar]')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('wraps the content in a SimpleBar scroll container when maxHeight is set', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var scrollArea;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderEditor({ maxHeight: '150px' });
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _a.sent();
+                    scrollArea = document.querySelector('[data-simplebar]');
+                    expect(scrollArea).toBeInTheDocument();
+                    expect(scrollArea).toHaveStyle({ maxHeight: '150px' });
+                    expect(scrollArea === null || scrollArea === void 0 ? void 0 : scrollArea.querySelector('.ProseMirror')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('strips <script> tags from the initial content (XSS protection)', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ref;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ref = renderEditor({ defaultValue: '<p>Merhaba</p><script>alert(1)</script>' }).ref;
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _b.sent();
+                    expect(document.querySelector('script')).not.toBeInTheDocument();
+                    expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getHTML()).not.toContain('<script>');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('keeps the default allowed tags (e.g. heading) when allowedTags is not provided', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ref;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ref = renderEditor({ defaultValue: '<h2>Başlık</h2>' }).ref;
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _b.sent();
+                    expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getHTML()).toContain('<h2>');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('strips tags outside a custom allowedTags list, keeping their text content', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ref, html;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    ref = renderEditor({
+                        defaultValue: '<h2>Başlık</h2><p>Kalın <strong>metin</strong></p>',
+                        allowedTags: ['p', 'br'],
+                    }).ref;
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _c.sent();
+                    html = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getHTML()) !== null && _b !== void 0 ? _b : '';
+                    expect(html).not.toContain('<h2>');
+                    expect(html).not.toContain('<strong>');
+                    expect(html).toContain('Başlık');
+                    expect(html).toContain('metin');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('strips <table> content when "table" is not in allowedTags', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ref;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ref = renderEditor({ defaultValue: '<table><tbody><tr><td>Hücre</td></tr></tbody></table>' }).ref;
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _b.sent();
+                    expect(document.querySelector('table')).not.toBeInTheDocument();
+                    expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getHTML()).toContain('Hücre');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('renders an actual <table> once "table" is added to allowedTags', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ref;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ref = renderEditor({
+                        defaultValue: '<table><tbody><tr><th>Ad</th></tr><tr><td>Ada</td></tr></tbody></table>',
+                        allowedTags: ['p', 'table'],
+                    }).ref;
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _b.sent();
+                    expect(document.querySelector('table')).toBeInTheDocument();
+                    expect(document.querySelector('th')).toHaveTextContent('Ad');
+                    expect(document.querySelector('td')).toHaveTextContent('Ada');
+                    expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getHTML()).toContain('<table');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('keeps colspan/rowspan attributes on merged table cells', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ref;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ref = renderEditor({
+                        defaultValue: '<table><tbody><tr><td colspan="2" rowspan="1">Birleşik</td></tr></tbody></table>',
+                        allowedTags: ['p', 'table'],
+                    }).ref;
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _b.sent();
+                    expect(document.querySelector('td')).toHaveAttribute('colspan', '2');
+                    expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getHTML()).toContain('colspan="2"');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('marks the editor as non-editable when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderEditor({ disabled: true, defaultValue: '<p>Merhaba</p>' });
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _a.sent();
+                    expect(document.querySelector('.ProseMirror')).toHaveAttribute('contenteditable', 'false');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('clears content through the imperative ref API', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ref;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ref = renderEditor({ defaultValue: '<p>Merhaba</p>' }).ref;
+                    return [4 /*yield*/, waitForEditor()];
+                case 1:
+                    _b.sent();
+                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clear();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () { var _a; return expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getHTML()).toBe(''); })];
+                case 2:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/components/RichTextEditor/props.d.ts

@@ -17,6 +17,10 @@ export interface RichTextEditorProps {
     className?: string;
     id?: string;
     minHeight?: string;
+    /** Verildiğinde editör içeriği bu yüksekliği aşınca SimpleBar ile scroll edilebilir olur */
+    maxHeight?: string;
+    /** HTML sanitizasyonunda (DOMPurify) izin verilen etiketler. Verilmezse varsayılan güvenli liste kullanılır. */
+    allowedTags?: string[];
     /** Story / consumer tarafında değişken listesi göstermek için opsiyonel */
     variables?: RichTextVariable[];
 }
@@ -36,5 +40,7 @@ export declare const RichTextEditorDefault: {
     hasError: boolean;
     errorMessage: string;
     minHeight: string;
+    maxHeight: string;
+    allowedTags: string[];
     variables: RichTextVariable[];
 };

package/dist/components/RichTextEditor/props.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextEditorDefault = void 0;
+var sanitize_1 = require("./utils/sanitize");
 exports.RichTextEditorDefault = {
     label: null,
     placeholder: 'Metin yaz…',
@@ -10,5 +11,7 @@ exports.RichTextEditorDefault = {
     hasError: false,
     errorMessage: null,
     minHeight: '200px',
+    maxHeight: null,
+    allowedTags: sanitize_1.DEFAULT_ALLOWED_TAGS,
     variables: [],
 };

package/dist/components/RichTextEditor/stories/RichTextEditor.stories.d.ts

@@ -26,6 +26,12 @@ declare const _default: {
         minHeight: {
             control: string;
         };
+        maxHeight: {
+            control: string;
+        };
+        allowedTags: {
+            control: boolean;
+        };
         onChange: {
             control: boolean;
         };
@@ -67,6 +73,47 @@ export declare const WithSampleContent: {
         minHeight: string;
     };
 };
+export declare const WithMaxHeight: {
+    name: string;
+    args: {
+        label: string;
+        defaultValue: string;
+        minHeight: string;
+        maxHeight: string;
+    };
+};
+export declare const WithCustomAllowedTags: {
+    name: string;
+    args: {
+        label: string;
+        defaultValue: string;
+        minHeight: string;
+        allowedTags: string[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const WithTable: {
+    name: string;
+    args: {
+        label: string;
+        defaultValue: string;
+        minHeight: string;
+        allowedTags: string[];
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
 export declare const WithError: {
     args: {
         label: string;

package/dist/components/RichTextEditor/stories/RichTextEditor.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.WithDescription = exports.Default = void 0;
+exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithTable = exports.WithCustomAllowedTags = exports.WithMaxHeight = exports.WithSampleContent = exports.WithDescription = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
@@ -37,6 +37,8 @@ exports.default = {
         hasError: { control: 'boolean' },
         errorMessage: { control: 'text' },
         minHeight: { control: 'text' },
+        maxHeight: { control: 'text' },
+        allowedTags: { control: false },
         onChange: { control: false },
         onBlur: { control: false },
         value: { control: false },
@@ -67,6 +69,47 @@ exports.WithSampleContent = {
         minHeight: '240px',
     },
 };
+exports.WithMaxHeight = {
+    name: 'Sınırlı yükseklik (scroll)',
+    args: {
+        label: 'Mail metni',
+        defaultValue: SAMPLE_CONTENT.repeat(3),
+        minHeight: '220px',
+        maxHeight: '220px',
+    },
+};
+exports.WithCustomAllowedTags = {
+    name: 'Kısıtlı izinli etiketler',
+    args: {
+        label: 'Mail metni',
+        defaultValue: '<h2>Başlık</h2><p>Kalın <strong>metin</strong> ve normal metin.</p>',
+        minHeight: '160px',
+        allowedTags: ['p', 'br'],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Sadece paragraf/satır sonuna izin verilir; `<h2>` ve `<strong>` etiketleri kaldırılır, içerikleri düz metin olarak kalır.',
+            },
+        },
+    },
+};
+exports.WithTable = {
+    name: 'Tablo (allowedTags: table)',
+    args: {
+        label: 'Mail metni',
+        defaultValue: "\n<p>Sipari\u015F \u00F6zeti:</p>\n<table>\n  <tbody>\n    <tr><th>\u00DCr\u00FCn</th><th>Adet</th><th>Tutar</th></tr>\n    <tr><td>Kablosuz Kulakl\u0131k</td><td>1</td><td>\u20BA1.299</td></tr>\n    <tr><td>\u015Earj Kablosu</td><td>2</td><td>\u20BA198</td></tr>\n  </tbody>\n</table>",
+        minHeight: '220px',
+        allowedTags: ['p', 'table'],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '`allowedTags` dizisine `table` eklendiğinde editör tablo şemasını (satır/hücre) destekler ve içerik render edilir. Eklenmezse `<table>` sanitize aşamasında düz metne indirilir.',
+            },
+        },
+    },
+};
 exports.WithError = {
     args: {
         label: 'Mail metni',

package/dist/components/RichTextEditor/utils/sanitize.d.ts

@@ -1,13 +1,15 @@
-export declare const sanitizeHtml: (html: string) => string;
+/** RichTextEditor `allowedTags` prop'u verilmediğinde kullanılan varsayılan izinli etiket listesi */
+export declare const DEFAULT_ALLOWED_TAGS: string[];
+export declare const sanitizeHtml: (html: string, allowedTags?: string[]) => string;
 /**
  * TipTap HTML → dışarı verilen HTML
  * Boş paragraflar (Enter + yazı yok) <br> olur.
  * İçinde metin olan paragraflar <p> olarak kalır.
  */
-export declare const serializeEditorHtml: (html: string) => string;
+export declare const serializeEditorHtml: (html: string, allowedTags?: string[]) => string;
 /**
  * Dışarıdan gelen HTML → TipTap'in düzenleyebileceği HTML
  * Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
  * <p> içindeki <br> hard-break olarak kalır.
  */
-export declare const prepareEditorHtml: (html: string) => string;
+export declare const prepareEditorHtml: (html: string, allowedTags?: string[]) => string;

package/dist/components/RichTextEditor/utils/sanitize.js

@@ -1,11 +1,21 @@
 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = void 0;
+exports.prepareEditorHtml = exports.serializeEditorHtml = exports.sanitizeHtml = exports.DEFAULT_ALLOWED_TAGS = void 0;
 var dompurify_1 = __importDefault(require("dompurify"));
-var ALLOWED_TAGS = [
+/** RichTextEditor `allowedTags` prop'u verilmediğinde kullanılan varsayılan izinli etiket listesi */
+exports.DEFAULT_ALLOWED_TAGS = [
     'p',
     'br',
     'h2',
@@ -26,13 +36,28 @@ var ALLOWED_ATTR = [
     'data-variable',
     'data-id',
     'data-label',
+    // Tablo hücrelerinde birleştirme (merge/split) ve dıştan gelen sütun genişliği bilgisi için
+    'colspan',
+    'rowspan',
+    'colwidth',
 ];
+/**
+ * `table` etiketi izinliyken düzgün render edilebilmesi için birlikte izinli olması
+ * gereken yapısal alt etiketler. Tüketici sadece "table" eklese de tablo çalışır.
+ */
+var TABLE_STRUCTURE_TAGS = ['table', 'tbody', 'tr', 'th', 'td', 'colgroup', 'col'];
+var resolveAllowedTags = function (allowedTags) {
+    if (!allowedTags.includes('table'))
+        return allowedTags;
+    return Array.from(new Set(__spreadArray(__spreadArray([], allowedTags, true), TABLE_STRUCTURE_TAGS, true)));
+};
 var EMPTY_PARAGRAPH_REGEX = /<p>(?:\s|&nbsp;|<br\s*\/?>)*<\/p>/gi;
-var sanitizeHtml = function (html) {
+var sanitizeHtml = function (html, allowedTags) {
+    if (allowedTags === void 0) { allowedTags = exports.DEFAULT_ALLOWED_TAGS; }
     if (!html)
         return '';
     return dompurify_1.default.sanitize(html, {
-        ALLOWED_TAGS: ALLOWED_TAGS,
+        ALLOWED_TAGS: resolveAllowedTags(allowedTags),
         ALLOWED_ATTR: ALLOWED_ATTR,
         KEEP_CONTENT: true,
     });
@@ -43,8 +68,9 @@ exports.sanitizeHtml = sanitizeHtml;
  * Boş paragraflar (Enter + yazı yok) <br> olur.
  * İçinde metin olan paragraflar <p> olarak kalır.
  */
-var serializeEditorHtml = function (html) {
-    var sanitized = (0, exports.sanitizeHtml)(html);
+var serializeEditorHtml = function (html, allowedTags) {
+    if (allowedTags === void 0) { allowedTags = exports.DEFAULT_ALLOWED_TAGS; }
+    var sanitized = (0, exports.sanitizeHtml)(html, allowedTags);
     if (!sanitized)
         return '';
     var serialized = sanitized.replace(EMPTY_PARAGRAPH_REGEX, '<br>');
@@ -59,8 +85,9 @@ exports.serializeEditorHtml = serializeEditorHtml;
  * Blok seviyesindeki <br> etiketleri boş <p> olur (Enter satırı).
  * <p> içindeki <br> hard-break olarak kalır.
  */
-var prepareEditorHtml = function (html) {
-    var sanitized = (0, exports.sanitizeHtml)(html);
+var prepareEditorHtml = function (html, allowedTags) {
+    if (allowedTags === void 0) { allowedTags = exports.DEFAULT_ALLOWED_TAGS; }
+    var sanitized = (0, exports.sanitizeHtml)(html, allowedTags);
     if (!sanitized)
         return '';
     if (typeof DOMParser === 'undefined') {
@@ -85,12 +112,13 @@ var prepareEditorHtml = function (html) {
             if (tag === 'P' || tag === 'H2' || tag === 'SPAN') {
                 return;
             }
-            if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {
+            if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV'
+                || tag === 'TABLE' || tag === 'TBODY' || tag === 'TR' || tag === 'TD' || tag === 'TH') {
                 replaceBlockBreaks(element);
             }
         });
     };
     replaceBlockBreaks(root);
-    return (0, exports.sanitizeHtml)(root.innerHTML);
+    return (0, exports.sanitizeHtml)(root.innerHTML, allowedTags);
 };
 exports.prepareEditorHtml = prepareEditorHtml;

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.13",
+  "version": "2.23.14",
   "files": [
     "dist"
   ],
@@ -14,6 +14,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@tiptap/extension-placeholder": "^3.27.3",
+    "@tiptap/extension-table": "3.27.3",
     "@tiptap/extension-underline": "^3.27.3",
     "@tiptap/pm": "^3.27.3",
     "@tiptap/react": "^3.27.3",
@@ -67,6 +68,12 @@
   "eslintConfig": {
     "extends": "react-app"
   },
+  "jest": {
+    "moduleNameMapper": {
+      "^@tiptap/pm/(.*)$": "<rootDir>/node_modules/@tiptap/pm/dist/$1/index.cjs",
+      "^@tiptap/core/(jsx-runtime|jsx-dev-runtime)$": "<rootDir>/node_modules/@tiptap/core/$1/index.cjs"
+    }
+  },
   "browserslist": {
     "production": [
       ">0.2%",