npm package: @peckadesign/contenteditor
Description: ![Preview app master](https://github.com/peckadesign/contenteditor/workflows/Preview%20app%20master/badge.svg) [![npm version](https://badge.fury.io/js/%40peckadesign%2Fcontenteditor.svg)](https://badge.fury.io/js/%40peckadesign%2Fcontenteditor)
Latest version: 0.4.0

# contenteditor
![Preview app master](https://github.com/peckadesign/contenteditor/workflows/Preview%20app%20master/badge.svg)
[![npm version](https://badge.fury.io/js/%40peckadesign%2Fcontenteditor.svg)](https://badge.fury.io/js/%40peckadesign%2Fcontenteditor)

Vlastní blokový editor obsahu, který bude kombinovat CKEditor4 společně s našimi vlastními widgety jako jsou výpis prodejen, paušálová kalkulačka, výpis produktových boxů atd.

## Použití na projektu
Balíček obsahuje vyexportovanou komponentu `ContentEditor.vue`. Ta obsahuje veškeré chování editoru a slouží jako vstup a výstup.

### Minimální konfigurace
```vue
<template>
  <ContentEditor :content.sync="content" :config="config" />
</template>
```

```ts
import ContentEditor from '@/components/ContentEditor.vue'
import Vue from 'vue'
import VueCompositionAPI, { defineComponent, ref } from '@vue/composition-api'
import { ContentBlockType } from '@/model/ContentBlock'
import { Content } from '@/model/Content'
import Config from '@/model/Config'

Vue.use(VueCompositionAPI)

export default defineComponent({
  components: { ContentEditor },
  setup() {
    const content = ref<Content>(
      new Content([
        {
          type: ContentBlockType.RichText,
          value: { html: 'Hello world' }
        }
      ])
    )

    const config: Config = {
      richTextEditor: {
        ckEditorConfig: {
          extraConfig: {
            libraryUrl:
              'https://www.nay.sk/pdp/library-mod/library/browse?embedded=1&mode=ck'
          }
        }
      }
    }

    return {
      content,
      config
    }
  }
})
</script>
```
- props `config` příjmá konfigurační objekt, který umožňuje měnit nastavení jednotlivých bloků editoru
- props `content` reprezentuje obsah content editoru
- event `update:content` je vyvolán při jakékoliv změně v rámci editoru a jako hodnotu nese aktuální stav

### Export dat do JSON
Reprezentaci `content` objektu lze serializovat do JSONu pomocí metody `Content.toJson()` viz.:
```vue
<template>
  <div>
    <ContentEditor :content.sync="content" :config="config" />
    <pre>{{ content.toJson() }}</pre>
  </div>
</template>
```

#### Struktura výsledného JSONu
V objektu existuje atribut `blocks` který reperezentuje kolekci jednotlivých bloků, seřazených podle toho jak určil uživatel. 
Každý blok má svůj atribut `type`, který určuje o jaký typ bloku se jedná. Hodnota bloku je v atributu `value` a vždy
se jedná o objekt specifický pro daný editor. Nikdy by se zde neměla objevit přímo skalární hodnota.

Typy podporovaných bloků
- **richText** - klasický CKEditor
- **storeBox** - blok s ID konkrétní prodejny
- **productBox** - reprezentace produktového boxu identifikovaného pomocí extId
- **productBoxList** - reprezentace kolekce produktových boxů identifikovaná pomocí kolekce extId
- **feeCalculator** - blok paušálové kalkulačky pro konkrétní typ produktu
- **accordeon** - sbalovací prvek, který nese titulek a obsah viditelný po rozkliknutí, obsahem je HTML

Podrobnou deifinici jakých typů nabývají hodnoty jednotlivých bloků lze vidět v [kódu](https://github.com/peckadesign/contenteditor/blob/master/src/model/ContentBlock.ts).

##### Ukázkový JSON
```json
{
  "blocks": [
    {
      "type": "richText",
      "value": {
        "html": "<p>Hello world</p>\n"
      }
    },
    {
      "type": "storeBox",
      "value": {
        "storeId": 123
      }
    },
    {
      "type": "productBox",
      "value": {
        "type": "slim",
        "basketButton": true,
        "extId": "IPHONE11"
      }
    },
    {
      "type": "productBoxList",
      "value": {
        "basketButton": false,
        "extIds": [
          "IPHONE11",
          "IPHONE12"
        ]
      }
    },
    {
      "type": "feeCalculator",
      "value": {
        "productType": "notebook"
      }
    },
    {
      "type": "accordeon",
      "value": {
        "title": "Titulek",
        "body": "<p>Hello world</p>\n"
      }
    }
  ]
}

```

## Project setup
```
npm ci
```

### Compiles and hot-reloads for development
```
npm run dev
```

### Compiles and minifies for production
```
npm run build
```

### Compiles and minifies for npm package
```
npm run build-bundle
```

### Run your unit tests
```
npm run test:unit
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).