@vonaffenfels/slate-editor 1.0.1

package/src/fromHTML.js

@@ -0,0 +1,5 @@
+const fromHTML = (htmlValue) => {
+
+};
+
+export default fromHTML;

package/src/index.js

@@ -0,0 +1,9 @@
+import BlockEditor from "./BlockEditor";
+import Renderer from "./Renderer";
+import {HtmlSerializer} from "./Serializer";
+
+export {
+    BlockEditor,
+    Renderer,
+    HtmlSerializer,
+};

package/src/plugins/ListItem.js

@@ -0,0 +1,49 @@
+import {ReactEditor} from "slate-react";
+import {Transforms} from "slate";
+
+export const ListItemPlugin = {
+    onKeyDown(event, editor) {
+        if (event.key !== 'Enter') {
+            return;
+        }
+
+        if (event.shiftKey === true) {
+            return;
+        }
+
+        if (!editor.selection) {
+            return;
+        }
+
+        const [node, index] = ReactEditor.toDOMPoint(editor, editor.selection.anchor);
+
+        if (isNodeBelowLi(node)) {
+            event.preventDefault();
+            Transforms.insertNodes(editor, {
+                at: editor.selection.anchor.path,
+                match: node => {
+                    return node.type === "list-item";
+                },
+                type: "list-item",
+                children: [{text: ""}],
+            });
+            return true;
+        }
+    },
+};
+
+const isNodeBelowLi = (node) => {
+    if (node.tagName === "LI") {
+        return true;
+    }
+
+    if (node.parentElement) {
+        if (node.parentElement.tagName === "LI") {
+            return true;
+        }
+
+        return isNodeBelowLi(node.parentElement);
+    }
+
+    return false;
+};

package/src/plugins/SoftBreak.js

@@ -0,0 +1,24 @@
+import {
+    getNodeFromPath, getNodeParentFromPath,
+} from "../util";
+
+export const SoftBreakPlugin = {
+    onKeyDown(event, editor) {
+        if (event.key !== 'Enter') {
+            return;
+        }
+
+        if (event.shiftKey === false) {
+            event.preventDefault();
+            if (editor.selection) {
+                return editor.insertNode({
+                    type: "paragraph",
+                    children: [{text: ""}],
+                });
+            }
+        }
+
+        event.preventDefault();
+        editor.insertText('\n');
+    },
+};

package/src/toHTML.js

@@ -0,0 +1,7 @@
+import {HtmlSerializer} from "./Serializer/Html";
+
+const toHTML = (editorValue) => {
+    return HtmlSerializer(editorValue);
+};
+
+export default toHTML;

package/src/toText.js

@@ -0,0 +1,7 @@
+import {TextSerializer} from "./Serializer/Text";
+
+const toText = (editorValue) => {
+    return TextSerializer(editorValue);
+};
+
+export default toText;

package/src/util.js

@@ -0,0 +1,20 @@
+export const getNodeFromPath = (editor, path) => {
+    let internalPath = [...path];
+    if (internalPath.length === 0) {
+        return editor;
+    }
+
+    const currPath = internalPath.shift();
+
+    return getNodeFromPath(editor?.children?.[currPath], internalPath);
+};
+
+export const getNodeParentFromPath = (editor, path) => {
+    let internalPath = [...path];
+    if (internalPath.length === 1) {
+        return editor;
+    }
+
+    const currPath = internalPath.shift();
+    return getNodeParentFromPath(editor?.children?.[currPath], internalPath);
+};

package/storyLoader.js

@@ -0,0 +1,46 @@
+const walkSync = require("walk-sync");
+
+module.exports = async function storiesLoader() {
+    const options = this.getOptions();
+
+    const files = walkSync(options.storiesRoot, {
+        directories: false,
+        globs: ["**/*.stories.js", "**/*.stories.jsx", "**/*.stories.ts"],
+    });
+
+    console.log(`Found ${files.length} stories in ${options.storiesRoot}`);
+
+    return `
+        export default async () => Promise.all([${files.map(file => "import('" + options.storiesImportRoot + "/" + file + "')").join(",")}]).then(modules => modules.reduce((curr, module) => {
+            const story = {};
+            const baseStory = module.default;
+
+            story.id = baseStory.id;
+            story.argTypes = baseStory.argTypes;
+            story.storyContext = baseStory.storyContext;
+            story.title = baseStory.title;
+            story.stories = [
+                {
+                    title: baseStory.title,
+                    args: baseStory.args
+                }
+            ]
+
+            for(let exportName in module) {
+
+                if(module && module.hasOwnProperty(exportName) && exportName !== "default") {
+                    const exportedStory = module[exportName];
+                    
+                    if(exportedStory) {                   
+                        story.stories.push({
+                            title: exportName,
+                            args: exportedStory.args
+                        })
+                    }
+                }
+            }
+            
+            return [...curr, story];
+        }, []))
+    `;
+};

package/tailwind.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    content: [
+        './src/**/*.js',
+    ],
+};

package/webpack.config.build.js

@@ -0,0 +1,53 @@
+const path = require('path');
+const config = require("./webpack.config");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+config.externals = {
+    react: "react",
+    "react-dom": "react-dom",
+    "prop-types": "prop-types",
+};
+
+config.module = {
+    rules: [
+        {
+            test: /\.js$/,
+            include: [
+                path.resolve(__dirname, 'src'),
+                path.resolve(
+                    __dirname, '..', '..', '@frontend', 'components',
+                ), // symlinks!
+            ],
+            exclude: [
+                path.resolve(
+                    __dirname, '..', '..', '@frontend', 'components', 'node_modules',
+                ),
+            ],
+            loader: 'babel-loader',
+        },
+        {
+            test: /\.s[ac]ss$/i,
+            include: path.resolve(__dirname, 'scss'),
+            use: [
+                {
+                    loader: MiniCssExtractPlugin.loader,
+                    options: {esModule: false},
+                },
+                "css-loader",
+                "sass-loader",
+            ],
+        },
+        {
+            test: /\.css$/,
+            use: [
+                {
+                    loader: MiniCssExtractPlugin.loader,
+                    options: {esModule: false},
+                },
+                'css-loader',
+            ],
+        },
+    ],
+};
+
+module.exports = config;

package/webpack.config.dev.js

@@ -0,0 +1,61 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const config = require("./webpack.config");
+const Dotenv = require("dotenv-webpack");
+
+config.mode = "development";
+config.watchOptions = {ignored: ['dist/**', 'node_modules/**']};
+config.cache = {type: "memory"};
+
+config.resolve.alias.react = path.resolve(__dirname, '../../node_modules/react');
+config.resolve.alias["react-dom"] = path.resolve(__dirname, '../../node_modules/react-dom');
+config.resolve.alias.storybookStories = path.resolve(__dirname, 'storyLoader.js');
+
+config.entry.dev = './src/dev/index.js';
+config.module.rules.unshift({
+    test: /storyLoader.js/i,
+    use: [
+        {
+            loader: path.resolve(__dirname + "/storyLoader.js"),
+            options: {
+                storiesRoot: path.resolve(__dirname + "/src/dev/testComponents"),
+                storiesImportRoot: "@vonaffenfels/slate-editor/src/dev/testComponents",
+            },
+        },
+    ],
+});
+config.module.rules.unshift({
+    test: /componentLoader.js/i,
+    use: [
+        {
+            loader: "@vonaffenfels/slate-editor/componentLoader.js",
+            options: {
+                componentRoot: path.resolve(__dirname + "/src/dev/testComponents"),
+                componentImportRoot: "@vonaffenfels/slate-editor/src/dev/testComponents",
+            },
+        },
+    ],
+})
+
+config.devtool = 'inline-source-map';
+
+config.plugins.push(new Dotenv());
+config.plugins.push(new HtmlWebpackPlugin({
+    title: 'Development',
+    filename: 'index.html',
+    template: path.join(
+        __dirname, 'src', 'dev', 'index.html',
+    ),
+}));
+
+config.devServer = {
+    static: {
+        serveIndex: true,
+        publicPath: path.join(__dirname, 'dist'),
+    },
+    compress: true,
+    liveReload: true,
+    port: 9000,
+};
+
+module.exports = config;

package/webpack.config.js

@@ -0,0 +1,117 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const Dotenv = require("dotenv-webpack");
+const {readFileSync} = require("fs");
+const babelConfig = JSON.parse(readFileSync(__dirname + "/.babelrc").toString());
+
+module.exports = {
+    mode: 'production',
+    entry: {
+        BlockEditor: './src/BlockEditor.js',
+        Renderer: './src/Renderer.js',
+        toHTML: './src/toHTML.js',
+        fromHTML: './src/fromHTML.js',
+        toText: './src/toText.js',
+        index: './src/index.js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                include: [
+                    path.resolve(__dirname, 'src'),
+                ],
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: babelConfig,
+                    },
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                include: path.resolve(__dirname, 'scss'),
+                use: [
+                    "style-loader",
+                    "css-loader",
+                    "sass-loader",
+                ],
+            },
+            {
+                test: /\.css$/i,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {importLoaders: 1},
+                    },
+                    {loader: 'postcss-loader'},
+                ],
+            },
+            {
+                test: /\.svg$/,
+                exclude: /node_modules/,
+                resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
+                use: [
+                    {
+                        loader: '@svgr/webpack',
+                        options: {
+                            dimensions: false,
+                            svgo: false,
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            outputPath: 'fonts/',
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(png)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            outputPath: 'img/',
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.js', '.json', '.jsx'],
+        fallback: {
+            stream: false,
+            buffer: false,
+            util: false,
+            path: false,
+            fs: false,
+            timers: false,
+        },
+        alias: {
+            scss: path.resolve(__dirname, 'scss'),
+            "@vonaffenfels/slate-editor/dist": path.resolve(__dirname, 'src'),
+        },
+    },
+    plugins: [
+        new Dotenv({systemvars: true}),
+        new MiniCssExtractPlugin({}),
+    ],
+    output: {
+        filename: '[name].js',
+        libraryTarget: "umd",
+        publicPath: "/dist/",
+        globalObject: "this",
+        path: path.resolve(__dirname, 'dist'),
+    },
+};