# Editor


## Examples


```html
<link
      href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <m-editor
      .config=${args.config}
      preset=${args.preset}
      variant=${args.variant}
      .AIOptions=${args.AIOptions}
      .imageUploadDescription=${args.imageUploadDescription}
      @initialized="${args.initialized}"
      @change="${args.change}"
      @blur="${args.blur}"
    >
      ${args.children ||
      html`
        <p>
          Here is some <strong>bold</strong>, <em>italic</em> and
          <u>underlined</u> text.
        </p>
        <ol>
          <li>First ordered item</li>
          <li>Second ordered item</li>
          <li>Third ordered item</li>
        </ol>
        <ul>
          <li>Unordered bullet point</li>
          <li>Another bullet point</li>
          <li>A <a href="https://example.com">link to a website</a></li>
        </ul>
      `}
    </m-editor>
```

### SingleAIOption

```html
<link
      href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <m-editor
      .config=${args.config}
      preset=${args.preset}
      variant=${args.variant}
      .AIOptions=${args.AIOptions}
      .imageUploadDescription=${args.imageUploadDescription}
      @initialized="${args.initialized}"
      @change="${args.change}"
      @blur="${args.blur}"
    >
      ${args.children}
    </m-editor>
```

### MultipleAIOptions

```html
<link
      href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <m-editor
      .config=${args.config}
      preset=${args.preset}
      variant=${args.variant}
      .AIOptions=${args.AIOptions}
      .imageUploadDescription=${args.imageUploadDescription}
      @initialized="${args.initialized}"
      @change="${args.change}"
      @blur="${args.blur}"
    >
      ${args.children}
    </m-editor>
```

### CustomConfig

```html
<link
      href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <m-stack direction="vertical" spacing="m">
      <m-editor
        .config=${args.config}
        preset=${args.preset}
        variant=${args.variant}
        .AIOptions=${args.AIOptions}
        .imageUploadDescription=${args.imageUploadDescription}
        @initialized="${args.initialized}"
        @change="${args.change}"
        @blur="${args.blur}"
        id="custom-config"
      ></m-editor>
      <m-button-group>
        <m-button class="lang-button" data-lang="fi">FI</m-button>
        <m-button class="lang-button" data-lang="sv">SV</m-button>
        <m-button class="lang-button" data-lang="no">NO</m-button>
        <m-button class="lang-button" data-lang="en">EN</m-button>
        <m-button class="lang-button" data-lang="da">DA</m-button>
      </m-button-group>
    </m-stack>
    <script>
      const editor = document.getElementById("custom-config");

      function setLanguage(language) {
        console.log("Setting language to", language);
        editor.config = {
          language: language,
          placeholderText: "Current language: " + language,
        };
      }

      document.querySelectorAll(".lang-button").forEach((button) => {
        button.addEventListener("click", () => {
          setLanguage(button.dataset.lang);
        });
      });

      setLanguage("fi");
    </script>
```

### UpdateContent

```html
<link
      href="node_modules/froala-editor/css/froala_editor.pkgd.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <m-stack direction="vertical" spacing="m">
      <m-editor
        @initialized="${args.initialized}"
        @change="${args.change}"
        @blur="${args.blur}"
        id="update-content-editor"
      >
        Initial content
      </m-editor>
      <m-button data-testid="button" id="update-button"
        >Update Content</m-button
      >
    </m-stack>
    <script>
      document.getElementById("update-button").addEventListener("click", () => {
        const editor = document.getElementById("update-content-editor");
        const value = editor.value;
        editor.value = value + " <p>Updated content!</p>";
      });
    </script>
```

### UpdateSelection

```html
<link
      href="node_modules/froala-editor/css/froala_editor.pkgd.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <m-stack direction="vertical" spacing="m">
      <m-editor
        @initialized="${args.initialized}"
        @change="${args.change}"
        @blur="${args.blur}"
        id="update-selection-editor"
      >
        <p data-testid="selection-text">
          Select this text and click the button below
        </p>
        <p>Another paragraph</p>
      </m-editor>
      <m-button data-testid="selection-button"
        >Select text and click here</m-button
      >
    </m-stack>
    <script>
      document
        .querySelector('[data-testid="selection-button"]')
        .addEventListener("click", () => {
          const editor = document.getElementById("update-selection-editor");
          editor?.updateSelection(
            "<strong>Selected text is replaced with bold text!</strong>"
          );
        });
    </script>
```

## Installation

As this is a addon component, you need to install the addon first.

```bash
npm install @mark/editor @mark/tokens @mark/icons
```

You also need to include the css from froala editor directly to the page where you are using the editor component

```html
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css">
```

And finally also include or import the editor.

```javascript
// import from installed package
import "@mark/tokens/css";
import "@mark/icons";
import "@mark/editor";
// import from the cdn
import 'https://cdn.grade.design/mark/editor/0.2.0/index.js';
```

## Other Considerations

You have to handle the styling of the content with your local applications styles. Either global css or specifically targeted inside the editor.

```css
m-editor p, 
m-editor ul,
m-editor ol {
    margin: 0 0 var(--m-space-m);
}
```