@zipify/wysiwyg 1.0.0-dev.1 → 1.0.0-dev.10

package/.env.example

@@ -0,0 +1 @@
+GITHUB_RELEASE_TOKEN=github_personal_access_token

package/.eslintignore

@@ -0,0 +1 @@
+dist/**

package/.release-it.json

@@ -2,5 +2,14 @@
   "npm": {
     "publish": true,
     "publishArgs": ["--access public"]
+  },
+  "git": {
+    "push": true,
+    "commit": true,
+    "tag": true
+  },
+  "github": {
+    "release": true,
+    "tokenRef": "GITHUB_RELEASE_TOKEN"
   }
 }

package/.stylelintignore

@@ -0,0 +1 @@
+dist/**

package/README.md

@@ -10,20 +10,19 @@ npm install @zipify/wysiwyg @vue/composition-api
 # if yarn
 yarn add @zipify/wysiwyg @vue/composition-api
 ```
-2. Register plugins
-```js
-import Vue from 'vue';
-import VueCompositionAPI from '@vue/composition-api';
+2. Use editor
 
-Vue.use(VueCompositionAPI);
-```
-3. Use editor
-
-For more details see [example app](/example)
+For more details see [available options](#Options) and [example app](/example)
 ```vue
 
 <template>
-  <Wysiwyg v-model="content" />
+  <Wysiwyg
+    v-model="content"
+    :fonts="fonts"
+    :presets="presets"
+    :make-preset-variable="$options.makePresetVariable"
+    default-preset-id="regular-1"
+  />
 </template>
 
 <script>
@@ -32,16 +31,137 @@ import { Wysiwyg } from '@zipify/wysiwyg';
 export default {
   components: { Wysiwyg },
 
+  makePresetVariable: ({ preset, device, property }) => {
+    return `--${preset.id}-${device}-${property}`;
+  },
+
   data: () => ({
     content: {
       type: 'doc',
       content: [...]
-    }
+    },
+    presets: [...],
+    fonts: [...]
   })
 }
 </script>
 ```
 
+## Options
+
+### Props
+
+|         Name         | Required? | Default Value | Note                                                           |
+|:--------------------:|:---------:|:-------------:|----------------------------------------------------------------|
+|        value         |   true    |       -       |                                                                |
+|       presets        |   true    |       -       | Array of [Style-Presets](#Style-Preset)                        |
+|  default-preset-id   |   true    |       -       | Id of any preset                                               |
+|  base-preset-class   |   true    |       -       | Base class of preset                                           |
+| make-preset-variable |   true    |       -       | [Generates](#Generate-Preset-Variable) name of preset variable |
+|        fonts         |   true    |       -       | Array of [fonts](#Font)                                        |
+|        device        |   false   |  `'desktop'`  | Active device type. can be 'mobile', 'tablet' or 'desktop'     |
+|   favorite-colors    |   false   |      []       | List of favorite colors in color picker                        |
+|   toolbar-offsets    |   false   |   `[0, 8]`    | Offset between toolbar and content                             |
+|   base-list-class    |   false   | `'zw-list--'` | Base list class                                                |
+
+### Style Preset
+Represents available font family. Required interface
+
+```typescript
+interface StylePreset {
+  id: string | number;
+  name: string;
+  hidden: boolean;
+  node?: PresetNode;
+  fallbackClass?: string;
+  common: CommonSettings;
+  desktop: DeviceSettings;
+  tablet: DeviceSettings;
+  mobile: DeviceSettings;
+}
+
+interface PresetNode {
+  type: 'heading';
+  level: 1 | 2 | 3 | 4;
+}
+
+interface CommonSettings {
+  font_family: string;
+  font_weight: string;
+  color: string;
+  font_style: 'italic' | 'normal';
+  text_decoration: 'none' | 'underline';
+}
+
+interface DeviceSettings {
+  alignment: 'left' | 'center' | 'right' | 'justify';
+  line_height: string;
+  font_size: string;
+}
+
+const example: StylePreset = {
+  id: 'h1',
+  name: 'H1',
+  node: {
+    type: 'heading',
+    level: 1
+  },
+  desktop: {
+    alignment: 'left',
+    line_height: '1.2',
+    font_size: '40px'
+  },
+  common: {
+    font_family: 'Lato',
+    font_weight: '700',
+    color: '#262626',
+    font_style: 'normal',
+    text_decoration: 'none'
+  },
+  tablet: {
+    alignment: 'left',
+    line_height: '1.2',
+    font_size: '40px'
+  },
+  mobile: {
+    alignment: 'left',
+    line_height: '1.2',
+    font_size: '28px'
+  }
+}
+```
+
+### Generate Preset Variable
+Variable name generator uses follow iterface
+```typescript
+const Device = 'common' | 'mobile' | 'tablet' | 'desktop'
+
+interface VariableGeneratorOptions {
+    preset: StylePreset;
+    device: Device;
+    property: string;
+}
+
+type GeneratePresetVariable = (options: VariableGeneratorOptions) => string;
+```
+
+### Font
+Represents available font family. Required interface
+```typescript
+interface Font {
+  name: string;
+  category: string;
+  styles: string[];
+}
+
+const exmaple: Font = {
+  name: 'Roboto',
+  styles: ['300', '300i', '400', '400i', '700', '700i'],
+  category: 'Regular'
+}
+```
+
+
 ## Contribute
 1. Clone repository
 ```shell

package/config/jest/setupTests.js

@@ -1,8 +1,10 @@
+/* eslint-disable no-console */
+
 import Vue from 'vue';
 import CompositionAPI from '@vue/composition-api';
 
-// eslint-disable-next-line no-console
 console.warn = jest.fn();
+console.error = jest.fn();
 
 Vue.use(CompositionAPI);
 
@@ -30,3 +32,7 @@ Range.prototype.getClientRects = () => ({
     length: 0,
     [Symbol.iterator]: jest.fn()
 });
+
+jest.mock('../../lib/utils/importIcon', () => ({
+    importIcon: () => ''
+}));

package/config/webpack/example.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const { DefinePlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { resolvePath, isDevelopment } = require('./settings');
 const loaders = require('./loaders');
@@ -74,6 +75,7 @@ module.exports = {
 
     plugins: [
         new VueLoaderPlugin(),
+        new MiniCssExtractPlugin(),
         new HtmlWebpackPlugin({
             title: 'ZipifyWysiwyg',
             template: resolvePath('./example/example.html')

package/config/webpack/lib.config.js

@@ -0,0 +1,48 @@
+const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { resolvePath } = require('./settings');
+const loaders = require('./loaders');
+
+module.exports = {
+    mode: 'production',
+    entry: resolvePath('./lib/index.js'),
+
+    output: {
+        clean: true,
+        path: resolvePath('./dist'),
+        filename: 'wysiwyg.js',
+        library: { type: 'module' },
+        module: true
+    },
+
+    resolve: {
+        extensions: ['*', '.js', '.vue', '.json']
+    },
+
+    module: {
+        rules: [
+            loaders.style,
+            loaders.js,
+            loaders.svg,
+            loaders.vue
+        ]
+    },
+
+    externals: {
+        '@vue/composition-api': { module: '@vue/composition-api' },
+        'zipify-colorpicker': { module: 'zipify-colorpicker' }
+    },
+
+    experiments: {
+        outputModule: true
+    },
+
+    optimization: {
+        minimize: false
+    },
+
+    plugins: [
+        new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({ filename: 'wysiwyg.css' })
+    ]
+};

package/config/webpack/loaders/style-loader.js

@@ -1,7 +1,9 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 module.exports = {
     test: /\.s?css$/,
     use: [
-        'vue-style-loader',
+        MiniCssExtractPlugin.loader,
         'css-loader'
     ]
 };

package/config/webpack/loaders/svg-loader.js

@@ -1,4 +1,4 @@
 module.exports = {
     test: /\.svg$/,
-    type: 'asset/resource'
+    type: 'asset/source'
 };