@vonaffenfels/slate-editor 1.1.71 → 1.2.0

package/src/dev/testComponents/TestStory3.js

@@ -1,75 +1,75 @@
-export default function TestStory3({
-    title,
-    mvp,
-    ...props
-}) {
-    return <div className="bg-green flex flex-col space-y-8 p-4 text-black">
-        <h1>{title}</h1>
-        <div className="grid grid-cols-4">
-            <div className="border border-black p-4" data-teasermanager-slot="test-1">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-2">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-3">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-4">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-5">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-6">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-7">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-8">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-9">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-10">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-11">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-12">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-13">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-14">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-15">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
-            </div>
-            <div className="border border-black p-4" data-teasermanager-slot="test-16">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
-            </div>
-        </div>
-        <h2>Props</h2>
-        {!!mvp && mvp.length > 0 && (
-            <ul>
-                {mvp.map(m => (
-                    <li key={m.feld1}>
-                        <b>{m.feld1}</b>:
-                        <span>{m.feld2}</span>
-                    </li>
-                ))}
-            </ul>
-        )}
-        <div>{JSON.stringify({
-            ...props,
-            mvp,
-            title,
-        })}</div>
-    </div>;
+export default function TestStory3({
+    title,
+    mvp,
+    ...props
+}) {
+    return <div className="bg-green flex flex-col space-y-8 p-4 text-black">
+        <h1>{title}</h1>
+        <div className="grid grid-cols-4">
+            <div className="border border-black p-4" data-teasermanager-slot="test-1">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-2">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-3">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-4">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-5">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-6">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-7">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-8">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-9">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-10">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-11">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-12">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, obcaecati, unde! In labore nesciunt optio, possimus praesentium sunt temporibus vero.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-13">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, rem, sapiente! At consequatur cum distinctio dolorem doloribus eligendi labore necessitatibus nemo officia, perspiciatis porro quisquam quos, saepe vitae voluptas. Eligendi?
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-14">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias beatae doloribus ex, impedit labore maxime perspiciatis quas. Alias aspernatur cupiditate, error impedit ipsa libero obcaecati reprehenderit sit sunt veniam.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-15">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at consequatur cupiditate dolore, dolorem, eligendi et eum explicabo harum illum inventore maxime molestias porro quod recusandae, reiciendis repellat repudiandae saepe sint tempora tempore temporibus veniam voluptates. Dignissimos explicabo iusto reprehenderit.
+            </div>
+            <div className="border border-black p-4" data-teasermanager-slot="test-16">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam beatae consequatur consequuntur deserunt exercitationem fugit, magni necessitatibus pariatur quae quia, quisquam saepe sunt, tenetur!
+            </div>
+        </div>
+        <h2>Props</h2>
+        {!!mvp && mvp.length > 0 && (
+            <ul>
+                {mvp.map(m => (
+                    <li key={m.feld1}>
+                        <b>{m.feld1}</b>:
+                        <span>{m.feld2}</span>
+                    </li>
+                ))}
+            </ul>
+        )}
+        <div>{JSON.stringify({
+            ...props,
+            mvp,
+            title,
+        })}</div>
+    </div>;
 }

package/src/dev/testComponents/TestStory3.stories.js

@@ -1,197 +1,197 @@
-import TestStory3 from "./TestStory3";
-
-export default {
-    title: "Design-System/Atoms/Ad Tags/Test Story 3",
-    // id: "TestStory3",
-    component: TestStory3,
-    storyContext: ["layout"],
-    argTypes: {
-        title: {
-            name: "Titel",
-            control: {type: "text"},
-        },
-        text: {
-            name: "Text",
-            control: {type: "text"},
-        },
-        boolean: {
-            name: "Boolean",
-            control: {type: "boolean"},
-        },
-        number: {
-            name: "Number",
-            control: {
-                type: "number",
-                min:1,
-                max:30,
-                step: 2,
-            },
-        },
-        range: {
-            name: "Range",
-            control: {
-                type: "range",
-                min:1,
-                max:30,
-                step: 1,
-            },
-        },
-        object: {
-            name: "Object",
-            control: {type: "object"},
-        },
-        radio: {
-            name: "Radio",
-            control: {
-                type: "radio",
-                options: {
-                    "Option 1": "option1",
-                    "Option 2": "option2",
-                },
-            },
-        },
-        inlineRadio: {
-            name: "Inline Radio",
-            control: {
-                type: "inline-radio",
-                options: {
-                    "Option 1": "option1",
-                    "Option 2": "option2",
-                },
-            },
-        },
-        check: {
-            name: "Check",
-            control: {
-                type: "check",
-                options: {
-                    "Option 1": "option1",
-                    "Option 2": "option2",
-                },
-            },
-        },
-        inlineCheck: {
-            name: "Inline Check",
-            control: {
-                type: "inline-check",
-                options: {
-                    "Option 1": "option1",
-                    "Option 2": "option2",
-                },
-            },
-        },
-        select: {
-            name: "Select",
-            control: {
-                type: "select",
-                options: {
-                    "Option 1": "option1",
-                    "Option 2": "option2",
-                },
-            },
-        },
-        mutliSelect: {
-            name: "Multi Select",
-            control: {
-                type: "multi-select",
-                options: {
-                    "Option 1": "option1",
-                    "Option 2": "option2",
-                },
-            },
-        },
-        color: {
-            name: "Color",
-            control: {type: "color"},
-        },
-        date: {
-            name: "Date",
-            control: {type: "date"},
-        },
-        contentfulAsset: {
-            name: "Contentful Asset",
-            control: {
-                type: 'contentful-content',
-                contentTypes: ["asset"],
-            },
-        },
-        contentfulAssets: {
-            name: "Contentful Assets",
-            control: {
-                type: 'contentful-contents',
-                contentTypes: ["asset"],
-            },
-        },
-        cloudinaryImage: {
-            name: "Cloudinary Image",
-            control: {type: 'cloudinary-image'},
-        },
-        cloudinaryImages: {
-            name: "Cloudinary Images",
-            control: {type: 'cloudinary-images'},
-        },
-        mvp: {
-            name: "MVP",
-            control: {
-                type: "mvp",
-                fields: {
-                    feld1: {
-                        name: "Feld 1",
-                        control: {type: "text"},
-                    },
-                    feld2: {
-                        name: "Feld 2",
-                        control: {type: "text"},
-                    },
-                    feld3: {
-                        name: "Feld 3",
-                        control: {
-                            type: "select",
-                            options: {
-                                "Option 1": "option1",
-                                "Option 2": "option2",
-                            },
-                        },
-                    },
-                },
-            },
-        },
-        testText1: {
-            name: "Text 1",
-            control: {type: "text"},
-            table: {category: "Kategorie"},
-        },
-        testText2: {
-            name: "Text 2",
-            control: {type: "text"},
-            table: {category: "Kategorie"},
-        },
-        testText3: {
-            name: "Text 3",
-            control: {type: "text"},
-            table: {category: "Kategorie"},
-        },
-        testText4: {
-            name: "Text 4",
-            control: {type: "text"},
-            table: {category: "Kategorie 2"},
-        },
-        testText5: {
-            name: "Text 5",
-            control: {type: "text"},
-            table: {category: "Kategorie 2"},
-        },
-        testText6: {
-            name: "Text 6",
-            control: {type: "text"},
-            table: {category: "Kategorie 2"},
-        },
-    },
-};
-
-export const TestStoryVariant1 = (args) => <TestStory3 {...args} />;
-export const TestStoryVariant2 = (args) => <TestStory3 {...args} />;
-
-TestStoryVariant1.args = {text: "Test 1"};
-
-TestStoryVariant2.args = {text: "Test 2"};
+import TestStory3 from "./TestStory3";
+
+export default {
+    title: "Design-System/Atoms/Ad Tags/Test Story 3",
+    // id: "TestStory3",
+    component: TestStory3,
+    storyContext: ["layout"],
+    argTypes: {
+        title: {
+            name: "Titel",
+            control: {type: "text"},
+        },
+        text: {
+            name: "Text",
+            control: {type: "text"},
+        },
+        boolean: {
+            name: "Boolean",
+            control: {type: "boolean"},
+        },
+        number: {
+            name: "Number",
+            control: {
+                type: "number",
+                min:1,
+                max:30,
+                step: 2,
+            },
+        },
+        range: {
+            name: "Range",
+            control: {
+                type: "range",
+                min:1,
+                max:30,
+                step: 1,
+            },
+        },
+        object: {
+            name: "Object",
+            control: {type: "object"},
+        },
+        radio: {
+            name: "Radio",
+            control: {
+                type: "radio",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        inlineRadio: {
+            name: "Inline Radio",
+            control: {
+                type: "inline-radio",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        check: {
+            name: "Check",
+            control: {
+                type: "check",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        inlineCheck: {
+            name: "Inline Check",
+            control: {
+                type: "inline-check",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        select: {
+            name: "Select",
+            control: {
+                type: "select",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        mutliSelect: {
+            name: "Multi Select",
+            control: {
+                type: "multi-select",
+                options: {
+                    "Option 1": "option1",
+                    "Option 2": "option2",
+                },
+            },
+        },
+        color: {
+            name: "Color",
+            control: {type: "color"},
+        },
+        date: {
+            name: "Date",
+            control: {type: "date"},
+        },
+        contentfulAsset: {
+            name: "Contentful Asset",
+            control: {
+                type: 'contentful-content',
+                contentTypes: ["asset"],
+            },
+        },
+        contentfulAssets: {
+            name: "Contentful Assets",
+            control: {
+                type: 'contentful-contents',
+                contentTypes: ["asset"],
+            },
+        },
+        cloudinaryImage: {
+            name: "Cloudinary Image",
+            control: {type: 'cloudinary-image'},
+        },
+        cloudinaryImages: {
+            name: "Cloudinary Images",
+            control: {type: 'cloudinary-images'},
+        },
+        mvp: {
+            name: "MVP",
+            control: {
+                type: "mvp",
+                fields: {
+                    feld1: {
+                        name: "Feld 1",
+                        control: {type: "text"},
+                    },
+                    feld2: {
+                        name: "Feld 2",
+                        control: {type: "text"},
+                    },
+                    feld3: {
+                        name: "Feld 3",
+                        control: {
+                            type: "select",
+                            options: {
+                                "Option 1": "option1",
+                                "Option 2": "option2",
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        testText1: {
+            name: "Text 1",
+            control: {type: "text"},
+            table: {category: "Kategorie"},
+        },
+        testText2: {
+            name: "Text 2",
+            control: {type: "text"},
+            table: {category: "Kategorie"},
+        },
+        testText3: {
+            name: "Text 3",
+            control: {type: "text"},
+            table: {category: "Kategorie"},
+        },
+        testText4: {
+            name: "Text 4",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+        testText5: {
+            name: "Text 5",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+        testText6: {
+            name: "Text 6",
+            control: {type: "text"},
+            table: {category: "Kategorie 2"},
+        },
+    },
+};
+
+export const TestStoryVariant1 = (args) => <TestStory3 {...args} />;
+export const TestStoryVariant2 = (args) => <TestStory3 {...args} />;
+
+TestStoryVariant1.args = {text: "Test 1"};
+
+TestStoryVariant2.args = {text: "Test 2"};