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

package/.env.example

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

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/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,135 @@ 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                                               |
+| 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;
+  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' | 'underscore';
+}
+
+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/lib/Wysiwyg.vue

@@ -54,8 +54,7 @@ export default {
 
         defaultPresetId: {
             type: [Number, String],
-            required: false,
-            default: ''
+            required: true
         },
 
         makePresetVariable: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.1",
+  "version": "1.0.0-dev.2",
   "description": "Zipify modification of TipTap text editor",
   "main": "lib/index.js",
   "repository": {
@@ -19,7 +19,8 @@
     "test:unit": "jest .",
     "optimize-svg": "svgo --config ./config/svgo.js",
     "gzip": "gzipper compress",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "release": "export $(cat ./.env | xargs) && release-it"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
@@ -60,6 +61,7 @@
     "jest-environment-jsdom": "^28.1.3",
     "lint-staged": "^13.0.3",
     "postcss-html": "^1.5.0",
+    "release-it": "^15.1.2",
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",
     "svgo": "^2.8.0",