krl-alfred 2.22.0 → 2.23.0

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

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
+exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
+exports.EditorShell = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background: ", ";\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--grey-10);\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: border-color 0.15s ease;\n"])), function (props) { return (props.$disabled ? 'var(--dark-opacity-5)' : 'var(--dark-opacity-3)'); }, function (props) { return (props.$disabled ? 0.7 : 1); }, function (props) { return (props.$disabled ? 'none' : 'auto'); });
+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: ", ";\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 {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\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: ", ";\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 {\n        background: var(--primary-opacity-10);\n        color: var(--primary);\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(--primary-opacity-10)' : 'transparent'); }, function (props) { return (props.$active ? 'var(--primary)' : '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        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        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.ErrorMessage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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"])));
+exports.VariableChipButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/RichTextEditor/extensions/VariableBadgeView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+declare const VariableBadgeView: ({ node }: NodeViewProps) => React.JSX.Element;
+export default VariableBadgeView;

package/dist/components/RichTextEditor/extensions/VariableBadgeView.js

@@ -0,0 +1,25 @@
+"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 __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("@tiptap/react");
+var Badges_1 = __importDefault(require("../../Badges"));
+var VariableBadgeView = function (_a) {
+    var node = _a.node;
+    var label = node.attrs.label || node.attrs.id || '';
+    return ((0, jsx_runtime_1.jsx)(react_1.NodeViewWrapper, __assign({ as: "span", className: "rte-variable-node", "data-variable": "", "data-id": node.attrs.id || undefined, "data-label": node.attrs.label || undefined }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: label }) })));
+};
+exports.default = VariableBadgeView;

package/dist/components/RichTextEditor/extensions/VariableNode.d.ts

@@ -0,0 +1,14 @@
+import { Node } from '@tiptap/core';
+export type VariableAttributes = {
+    id: string;
+    label: string;
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        variable: {
+            insertVariable: (attrs: VariableAttributes) => ReturnType;
+        };
+    }
+}
+export declare const VariableNode: Node<any, any>;
+export default VariableNode;

package/dist/components/RichTextEditor/extensions/VariableNode.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariableNode = void 0;
+var core_1 = require("@tiptap/core");
+var react_1 = require("@tiptap/react");
+var VariableBadgeView_1 = __importDefault(require("./VariableBadgeView"));
+exports.VariableNode = core_1.Node.create({
+    name: 'variable',
+    group: 'inline',
+    inline: true,
+    atom: true,
+    selectable: true,
+    addAttributes: function () {
+        return {
+            id: {
+                default: null,
+                parseHTML: function (element) { return element.getAttribute('data-id'); },
+                renderHTML: function (attributes) {
+                    if (!attributes.id)
+                        return {};
+                    return { 'data-id': attributes.id };
+                },
+            },
+            label: {
+                default: null,
+                parseHTML: function (element) { return element.getAttribute('data-label'); },
+                renderHTML: function (attributes) {
+                    if (!attributes.label)
+                        return {};
+                    return { 'data-label': attributes.label };
+                },
+            },
+        };
+    },
+    parseHTML: function () {
+        return [
+            {
+                tag: 'span[data-variable]',
+            },
+        ];
+    },
+    renderHTML: function (_a) {
+        var node = _a.node, HTMLAttributes = _a.HTMLAttributes;
+        return [
+            'span',
+            (0, core_1.mergeAttributes)(HTMLAttributes, {
+                'data-variable': '',
+                class: 'rte-variable',
+                contenteditable: 'false',
+            }),
+            node.attrs.label || node.attrs.id || '',
+        ];
+    },
+    addNodeView: function () {
+        return (0, react_1.ReactNodeViewRenderer)(VariableBadgeView_1.default);
+    },
+    addCommands: function () {
+        var _this = this;
+        return {
+            insertVariable: function (attrs) {
+                return function (_a) {
+                    var commands = _a.commands;
+                    return commands.insertContent({
+                        type: _this.name,
+                        attrs: attrs,
+                    });
+                };
+            },
+        };
+    },
+});
+exports.default = exports.VariableNode;

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

@@ -0,0 +1,4 @@
+export { default } from './RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorRef, RichTextVariable } from './props';
+export { VariableNode } from './extensions/VariableNode';
+export { sanitizeHtml, serializeEditorHtml, prepareEditorHtml } from './utils/sanitize';

package/dist/components/RichTextEditor/index.js

@@ -0,0 +1,14 @@
+"use strict";
+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 = exports.VariableNode = exports.default = void 0;
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(RichTextEditor_1).default; } });
+var VariableNode_1 = require("./extensions/VariableNode");
+Object.defineProperty(exports, "VariableNode", { enumerable: true, get: function () { return VariableNode_1.VariableNode; } });
+var sanitize_1 = require("./utils/sanitize");
+Object.defineProperty(exports, "sanitizeHtml", { enumerable: true, get: function () { return sanitize_1.sanitizeHtml; } });
+Object.defineProperty(exports, "serializeEditorHtml", { enumerable: true, get: function () { return sanitize_1.serializeEditorHtml; } });
+Object.defineProperty(exports, "prepareEditorHtml", { enumerable: true, get: function () { return sanitize_1.prepareEditorHtml; } });

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

@@ -0,0 +1,38 @@
+import type { Editor } from '@tiptap/react';
+export type RichTextVariable = {
+    id: string;
+    label: string;
+};
+export interface RichTextEditorProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (html: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+    className?: string;
+    id?: string;
+    minHeight?: string;
+    /** Story / consumer tarafında değişken listesi göstermek için opsiyonel */
+    variables?: RichTextVariable[];
+}
+export interface RichTextEditorRef {
+    insertVariable: (variable: RichTextVariable) => void;
+    getHTML: () => string;
+    getEditor: () => Editor | null;
+    focus: () => void;
+    clear: () => void;
+}
+export declare const RichTextEditorDefault: {
+    label: string;
+    placeholder: string;
+    defaultValue: string;
+    disabled: boolean;
+    hasError: boolean;
+    errorMessage: string;
+    minHeight: string;
+    variables: RichTextVariable[];
+};

package/dist/components/RichTextEditor/props.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextEditorDefault = void 0;
+exports.RichTextEditorDefault = {
+    label: null,
+    placeholder: 'Metin yaz…',
+    defaultValue: '',
+    disabled: false,
+    hasError: false,
+    errorMessage: null,
+    minHeight: '200px',
+    variables: [],
+};

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import type { RichTextEditorRef } from '../props';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../props").RichTextEditorProps & React.RefAttributes<RichTextEditorRef>>;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        hasError: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
+        minHeight: {
+            control: string;
+        };
+        onChange: {
+            control: boolean;
+        };
+        onBlur: {
+            control: boolean;
+        };
+        value: {
+            control: boolean;
+        };
+        defaultValue: {
+            control: boolean;
+        };
+        variables: {
+            control: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+        placeholder: string;
+        minHeight: string;
+    };
+};
+export declare const WithSampleContent: {
+    name: string;
+    args: {
+        label: string;
+        defaultValue: string;
+        minHeight: string;
+    };
+};
+export declare const WithError: {
+    args: {
+        label: string;
+        hasError: boolean;
+        errorMessage: string;
+        defaultValue: string;
+        minHeight: string;
+    };
+};
+export declare const Disabled: {
+    args: {
+        label: string;
+        disabled: boolean;
+        defaultValue: string;
+        minHeight: string;
+    };
+};
+export declare const InsertVariables: {
+    name: string;
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,101 @@
+"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 __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.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
+var RichTextEditor_styled_1 = require("../RichTextEditor.styled");
+var SAMPLE_VARIABLES = [
+    { id: 'name', label: 'Ad' },
+    { id: 'order_no', label: 'Sipariş no' },
+    { id: 'amount', label: 'Tutar' },
+];
+var SAMPLE_CONTENT = "\n<p>Merhaba <span data-variable data-id=\"name\" data-label=\"Ad\">Ad</span></p>\n<p>Abonelik sipari\u015Fin ba\u015Far\u0131yla al\u0131nd\u0131, te\u015Fekk\u00FCr ederiz.</p>\n<p><span data-variable data-id=\"order_no\" data-label=\"Sipari\u015F no\">Sipari\u015F no</span> sipari\u015Fin haz\u0131rlanmaya ba\u015Flad\u0131; kargoya verildi\u011Finde sana ayr\u0131 bir bilgilendirme maili g\u00F6nderece\u011Fiz.</p>\n<p>Aboneliklerim sayfandaki sipari\u015F detay b\u00F6l\u00FCm\u00FCnden aboneliklerini g\u00F6r\u00FCnt\u00FCleyebilir ve y\u00F6netebilirsin.</p>\n";
+exports.default = {
+    title: 'Components/RichTextEditor',
+    component: RichTextEditor_1.default,
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        disabled: { control: 'boolean' },
+        hasError: { control: 'boolean' },
+        errorMessage: { control: 'text' },
+        minHeight: { control: 'text' },
+        onChange: { control: false },
+        onBlur: { control: false },
+        value: { control: false },
+        defaultValue: { control: false },
+        variables: { control: false },
+    },
+};
+exports.Default = {
+    args: {
+        label: 'Mail metni',
+        placeholder: 'Metin yaz…',
+        minHeight: '220px',
+    },
+};
+exports.WithSampleContent = {
+    name: 'Örnek içerik + değişken chip’leri',
+    args: {
+        label: 'Mail metni',
+        defaultValue: SAMPLE_CONTENT,
+        minHeight: '240px',
+    },
+};
+exports.WithError = {
+    args: {
+        label: 'Mail metni',
+        hasError: true,
+        errorMessage: 'Mail metni zorunludur.',
+        defaultValue: '<p></p>',
+        minHeight: '180px',
+    },
+};
+exports.Disabled = {
+    args: {
+        label: 'Mail metni',
+        disabled: true,
+        defaultValue: SAMPLE_CONTENT,
+        minHeight: '220px',
+    },
+};
+var InsertVariableStory = function () {
+    var editorRef = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(SAMPLE_CONTENT), html = _a[0], setHtml = _a[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { maxWidth: 720 } }, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_1.default, { ref: editorRef, label: "Mail metni", value: html, onChange: setHtml, minHeight: "240px" }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.VariableActions, { children: SAMPLE_VARIABLES.map(function (variable) { return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.VariableChipButton, __assign({ type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.insertVariable(variable); } }, { children: ["+ ", variable.label] }), variable.id)); }) }), (0, jsx_runtime_1.jsxs)("details", __assign({ style: { marginTop: '1rem' } }, { children: [(0, jsx_runtime_1.jsx)("summary", __assign({ style: { cursor: 'pointer', font: 'var(--caption-bold-12-15)', color: 'var(--dark-opacity-50)' } }, { children: "HTML \u00E7\u0131kt\u0131s\u0131" })), (0, jsx_runtime_1.jsx)("pre", __assign({ style: {
+                            marginTop: '0.5rem',
+                            padding: '0.75rem',
+                            borderRadius: '0.5rem',
+                            background: 'var(--dark-opacity-3)',
+                            fontSize: 12,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        } }, { children: html }))] }))] })));
+};
+exports.InsertVariables = {
+    name: 'Değişken ekleme (ref API)',
+    render: function () { return (0, jsx_runtime_1.jsx)(InsertVariableStory, {}); },
+    parameters: {
+        docs: {
+            description: {
+                story: "\nDesign system bile\u015Feni de\u011Fi\u015Fken se\u00E7ici UI i\u00E7ermez; t\u00FCketici taraf\u0131nda `ref.insertVariable` ile cursor konumuna chip eklenir:\n\n```tsx\nconst ref = useRef<RichTextEditorRef>(null);\n\n<RichTextEditor ref={ref} value={html} onChange={setHtml} />\n<button onClick={() => ref.current?.insertVariable({ id: 'name', label: 'Ad' })}>\n  Ad ekle\n</button>\n```\n                ",
+            },
+        },
+    },
+};

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

@@ -0,0 +1,13 @@
+export declare const sanitizeHtml: (html: 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;
+/**
+ * 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;

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

@@ -0,0 +1,95 @@
+"use strict";
+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;
+var dompurify_1 = __importDefault(require("dompurify"));
+var ALLOWED_TAGS = [
+    'p',
+    'br',
+    'strong',
+    'b',
+    'em',
+    'i',
+    'u',
+    's',
+    'strike',
+    'ul',
+    'ol',
+    'li',
+    'span',
+];
+var ALLOWED_ATTR = [
+    'class',
+    'data-variable',
+    'data-id',
+    'data-label',
+];
+var EMPTY_PARAGRAPH_REGEX = /<p>(?:\s|&nbsp;|<br\s*\/?>)*<\/p>/gi;
+var sanitizeHtml = function (html) {
+    if (!html)
+        return '';
+    return dompurify_1.default.sanitize(html, {
+        ALLOWED_TAGS: ALLOWED_TAGS,
+        ALLOWED_ATTR: ALLOWED_ATTR,
+        KEEP_CONTENT: true,
+    });
+};
+exports.sanitizeHtml = sanitizeHtml;
+/**
+ * TipTap HTML → dışarı verilen HTML
+ * 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);
+    if (!sanitized)
+        return '';
+    var serialized = sanitized.replace(EMPTY_PARAGRAPH_REGEX, '<br>');
+    if (/^(?:<br\s*\/?>|\s)*$/i.test(serialized)) {
+        return '';
+    }
+    return serialized;
+};
+exports.serializeEditorHtml = serializeEditorHtml;
+/**
+ * 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.
+ */
+var prepareEditorHtml = function (html) {
+    var sanitized = (0, exports.sanitizeHtml)(html);
+    if (!sanitized)
+        return '';
+    if (typeof DOMParser === 'undefined') {
+        return sanitized;
+    }
+    var parser = new DOMParser();
+    var doc = parser.parseFromString("<div id=\"rte-root\">".concat(sanitized, "</div>"), 'text/html');
+    var root = doc.getElementById('rte-root');
+    if (!root)
+        return sanitized;
+    var replaceBlockBreaks = function (parent) {
+        Array.from(parent.childNodes).forEach(function (child) {
+            if (child.nodeType !== Node.ELEMENT_NODE)
+                return;
+            var element = child;
+            var tag = element.tagName;
+            if (tag === 'BR') {
+                var emptyParagraph = doc.createElement('p');
+                parent.replaceChild(emptyParagraph, element);
+                return;
+            }
+            if (tag === 'P' || tag === 'SPAN') {
+                return;
+            }
+            if (tag === 'LI' || tag === 'UL' || tag === 'OL' || tag === 'DIV') {
+                replaceBlockBreaks(element);
+            }
+        });
+    };
+    replaceBlockBreaks(root);
+    return (0, exports.sanitizeHtml)(root.innerHTML);
+};
+exports.prepareEditorHtml = prepareEditorHtml;

package/dist/components/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TagProps } from './props';
-declare const Tag: ({ label, onRemove, disabled, className, }: TagProps) => React.JSX.Element;
+declare const Tag: ({ label, onRemove, onClick, hasStar, disabled, className, }: TagProps) => React.JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -19,7 +19,17 @@ var props_1 = require("./props");
 var Tag_styled_1 = require("./Tag.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Tag = function (_a) {
-    var label = _a.label, onRemove = _a.onRemove, _b = _a.disabled, disabled = _b === void 0 ? props_1.TagDefault.disabled : _b, className = _a.className;
-    return ((0, jsx_runtime_1.jsxs)(Tag_styled_1.TagStyled, __assign({ className: className, "$disabled": disabled }, { children: [(0, jsx_runtime_1.jsx)(Tag_styled_1.TagLabel, { children: label }), onRemove && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagRemoveButton, __assign({ type: "button", "aria-label": "".concat(label, " etiketini kald\u0131r"), disabled: disabled, onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closemini", width: "1rem", height: "1rem", color: "currentColor" }) })))] })));
+    var label = _a.label, onRemove = _a.onRemove, onClick = _a.onClick, _b = _a.hasStar, hasStar = _b === void 0 ? props_1.TagDefault.hasStar : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.TagDefault.disabled : _c, className = _a.className;
+    var isClickable = Boolean(onClick) && !disabled;
+    var handleClick = function () {
+        if (!isClickable)
+            return;
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleRemove = function (event) {
+        event.stopPropagation();
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    };
+    return ((0, jsx_runtime_1.jsxs)(Tag_styled_1.TagStyled, __assign({ className: className, "$disabled": disabled, "$clickable": isClickable, onClick: handleClick }, { children: [hasStar && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagStar, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Starfull", width: "1rem", height: "1rem", color: "var(--yellowDark)" }) })), (0, jsx_runtime_1.jsx)(Tag_styled_1.TagLabel, { children: label }), onRemove && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagRemoveButton, __assign({ type: "button", "aria-label": "".concat(label, " etiketini kald\u0131r"), disabled: disabled, onClick: handleRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closemini", width: "1rem", height: "1rem", color: "currentColor" }) })))] })));
 };
 exports.default = Tag;

package/dist/components/Tag/Tag.styled.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable"> & {
     $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+    $clickable?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable"> & {
     $disabled?: boolean;
+    $clickable?: boolean;
 }, never>>> & string;
+export declare const TagStar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const TagLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const TagRemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;

package/dist/components/Tag/Tag.styled.js

@@ -7,9 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagRemoveButton = exports.TagLabel = exports.TagStyled = void 0;
+exports.TagRemoveButton = exports.TagLabel = exports.TagStar = exports.TagStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n"], ["\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n"])));
-exports.TagLabel = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"])));
-exports.TagRemoveButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n    cursor: ", ";\n"], ["\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    padding: 0.5rem 1rem;\n    border-radius: 0.25rem;\n    border: 1px solid var(--grey-10);\n    background-color: var(--dark-opacity-3);\n    box-sizing: border-box;\n    cursor: ", ";\n"])), function (props) { return (props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default'); });
+exports.TagStar = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 0.25rem;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-right: 0.25rem;\n"])));
+exports.TagLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"], ["\n    font: var(--body-semi-bold-13-16);\n    color: var(--dark);\n    word-break: break-word;\n"])));
+exports.TagRemoveButton = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n    margin-left: 0.5rem;\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--dark);\n    cursor: pointer;\n    flex-shrink: 0;\n    margin-left: 0.5rem;\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,10 +1,13 @@
 export interface TagProps {
     label: string;
     onRemove?: () => void;
+    onClick?: () => void;
+    hasStar?: boolean;
     disabled?: boolean;
     className?: string;
 }
 export declare const TagDefault: {
+    hasStar: boolean;
     disabled: boolean;
 };
 export type TagComponentProps = TagProps;

package/dist/components/Tag/props.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagDefault = void 0;
 exports.TagDefault = {
+    hasStar: false,
     disabled: false,
 };