feat: adicionado a possibilidade de configurar plugins

README.md

@@ -10,4 +10,4 @@ icones : <https://remixicon.com/>
 
 - instanlando dependências `npm install`
 - executando em dev mode `npm run dev` o projeto estara disponivel em `localhost:9000`
-- gerando uma build `npm run build` os arquivos da build serão gerados no diretorio `dist`
+- gerando uma build `npm run build-dev` os arquivos da build serão gerados no diretorio `dist`

src/ExitusEditor.ts

@@ -33,19 +33,20 @@ class ExitusEditor extends Editor {
   static toolbarOrder: string[]
 
   constructor(options: Partial<ExitusEditorOptions> = {}) {
-    const ext = ExitusEditor.plugins.reduce<AnyExtension[]>((acc, plugin) => {
+    const extensions = ExitusEditor.plugins.reduce<AnyExtension[]>((acc, plugin) => {
       return [...acc, ...plugin.requires]
     }, [])
 
-    super({ ...options, extensions: ext })
+    super({ ...options, extensions })
     this.editorInstance = generateUUID()
 
     const toolbarOrder: string[] = [...ExitusEditor.toolbarOrder, ...(options.toolbarOrder ?? [])]
 
     this.toolbar = new Toolbar(this, toolbarOrder)
 
     ExitusEditor.plugins.forEach(plugin => {
-      const pluginInstance = new plugin(this)
+      const config = options.config?.[plugin.pluginName]
+      const pluginInstance = new plugin(this, config)
       pluginInstance.init()
       this.pluginsInstances.set(plugin.pluginName, pluginInstance)
     })

src/editor/Plugin.ts

@@ -6,8 +6,18 @@ export interface PluginInterface {
   destroy(): void
 }
 
+export interface Config {
+  [key: string]: any
+}
+
 export class Plugin implements PluginInterface {
-  constructor(readonly editor: ExitusEditor) {}
+  config: Config
+  constructor(
+    readonly editor: ExitusEditor,
+    config: Config
+  ) {
+    this.config = config
+  }
   init(): void {
     throw new Error('init must be implemented in the derived class')
   }

src/extensions/colar-questao/style.css

@@ -0,0 +1,48 @@
+.colar-questao {
+  border: 2px solid #009688;
+  border-radius: 0.5rem;
+  margin: 2rem 0;
+  position: relative;
+}
+.colar-questao label {
+  background-color: #009688;
+  border-radius: 0 0 0.5rem 0;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: bold;
+  padding: 0.25rem 0.5rem;
+  position: absolute;
+  top: 0;
+}
+
+.colar-questao .close-colar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #009688;
+  border-radius: 50%;
+  border: none;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  color: white;
+  font-size: 15px;
+  font-weight: 700;
+  position: absolute;
+  margin: 0.25rem;
+  top: 0;
+  right: 0;
+}
+
+.colar-questao > .content {
+  margin-top: 1.5rem;
+  padding: 1rem;
+}
+
+.colar-questao > .content.is-editable {
+    background-color: rgba(0, 0, 0, .1);
+    border: 2px dashed  rgba(61, 37, 20, .12);
+    border-radius: 0.5rem;
+    margin: 2.5rem 1rem 1rem;
+    padding: 0.5rem;
+  }

src/extensions/katex/KatexPlugin.ts

@@ -1,6 +1,7 @@
 import { Plugin } from '@editor/Plugin'
 import { type ButtonEventProps } from '@editor/ui'
 import formula from '@icons/formula.svg'
+import './style.css'
 
 import { Katex, KatexBalloon } from '.'
 

src/extensions/katex/style.css

@@ -0,0 +1,76 @@
+.tiptap .latex-editor {
+    border-radius: 0.25rem;
+    background: #202020;
+    color: #fff;
+    caret-color: white;
+    font-family: monospace;
+    padding: 0.2rem 0.5rem;
+    min-width: 30px;
+  }
+
+  .tiptap .latex-editor:hover {
+    cursor: text;
+  }
+
+  .math-tex-error {
+    color: red;
+  }
+
+  .math-tex {
+    display: inline-block;
+  }
+
+  .math-tex .katex {
+    white-space: nowrap;
+  }
+
+  .latex .katex {
+    white-space: nowrap;
+  }
+
+  .latex-editting-container {
+    display: flex;
+    margin: 5px;
+    flex-direction: column;
+  }
+
+  .latex-editting-input {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  .latex-editting-input > input {
+    margin: 0 var(--spacing-sm);
+    outline: none;
+    border: 1px solid var(--active-blue);
+  }
+
+  .latex-input-text {
+    min-width: 250px;
+    padding: var(--spacing-lg);
+    line-height: 20px;
+  }
+
+  .latex-editting-preview {
+    display: flex;
+    min-height: 30px;
+    padding: var(--spacing-md);
+    margin: var(--spacing-md);
+    border: 1px solid;
+    background-color: rgb(244, 244, 244);
+  }
+
+  .latex-editting-footer {
+    display: flex;
+    flex-direction: row;
+    min-height: 30px;
+    justify-content: space-around;
+  }
+
+  .latex-editting-displayCheckbox {
+    display: flex;
+    justify-items: start;
+    margin-left: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+  }

src/extensions/mathtype/MathTypePlugin.ts

@@ -1,6 +1,5 @@
 //@ts-nocheck
 import { Plugin } from '@editor/Plugin'
-import type ExitusEditor from '@src/ExitusEditor'
 import Configuration from '@wiris/mathtype-html-integration-devkit/src/configuration'
 import Core from '@wiris/mathtype-html-integration-devkit/src/core.src'
 import Image from '@wiris/mathtype-html-integration-devkit/src/image'
@@ -27,12 +26,9 @@ export class MathTypePlugin extends Plugin {
     return [MathType]
   }
 
-  constructor(editor: ExitusEditor) {
-    super(editor)
+  init(): void {
     this.createMathTypeIntegration()
-  }
 
-  init(): void {
     this.editor.toolbar.setButton('mathtype', {
       icon: mathIcon,
       click: () => {
@@ -75,7 +71,7 @@ export class MathTypePlugin extends Plugin {
     try {
       if (this.integration !== undefined) return
 
-      this.integration = this.addIntegration({
+      const defaultConfig = {
         editorParameters: {
           fontFamily: 'Arial',
           fontStyle: 'normal',
@@ -88,7 +84,9 @@ export class MathTypePlugin extends Plugin {
           ],
           language: 'pt_br'
         }
-      })
+      }
+
+      this.integration = this.addIntegration(this.config?.mathTypeParameters ?? defaultConfig)
 
       window.WirisPlugin = {
         Core,

src/public/index.html

@@ -71,13 +71,18 @@
                 language: "pt_br"
               }
             },
+          },
+          image: {
+            proxyUrl: "http://localhost:3000/proxy",
+            inline: true,
+            allowBase64: true,
           }
         }
       })
 
       const exitusEditor2 = new ExitusEditor({
         container: document.querySelector('.element2'),
-        //content: `<p><span class="math-tex">\\(\\sqrt{123123 \\pi}\\)</span></p>`
+        content: '<colar-questao title="comando">teste</colar-questao>'
       })
 
       exitusEditor.on('create', ({ editor }) => {

src/public/style.css

@@ -814,87 +814,6 @@ p {
   margin: 0 0;
 }
 
-.tiptap .latex-editor {
-  border-radius: 0.25rem;
-  background: #202020;
-  color: #fff;
-  caret-color: white;
-  font-family: monospace;
-  padding: 0.2rem 0.5rem;
-  min-width: 30px;
-}
-
-.tiptap .latex-editor:hover {
-  cursor: text;
-}
-
-.math-tex-error {
-  color: red;
-}
-
-.math-tex {
-  display: inline-block;
-}
-
-/*  .math-tex > .katex { white-space: normal }
-.katex-html > .base { margin: 0.25em 0 }
-.math-tex { margin: 0.5em 0; } */
-
-.math-tex .katex {
-  white-space: nowrap;
-}
-
-.latex .katex {
-  white-space: nowrap;
-}
-
-.latex-editting-container {
-  display: flex;
-  margin: 5px;
-  flex-direction: column;
-}
-
-.latex-editting-input {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-}
-
-.latex-editting-input > input {
-  margin: 0 var(--spacing-sm);
-  outline: none;
-  border: 1px solid var(--active-blue);
-}
-
-.latex-input-text {
-  min-width: 250px;
-  padding: var(--spacing-lg);
-  line-height: 20px;
-}
-
-.latex-editting-preview {
-  display: flex;
-  min-height: 30px;
-  padding: var(--spacing-md);
-  margin: var(--spacing-md);
-  border: 1px solid;
-  background-color: rgb(244, 244, 244);
-}
-
-.latex-editting-footer {
-  display: flex;
-  flex-direction: row;
-  min-height: 30px;
-  justify-content: space-around;
-}
-
-.latex-editting-displayCheckbox {
-  display: flex;
-  justify-items: start;
-  margin-left: var(--spacing-sm);
-  margin-top: var(--spacing-sm);
-}
-
 .pickr {
   position: relative;
   overflow: visible;

webpack.config.js

@@ -4,7 +4,6 @@ const path = require('path')
 const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = (env, argv) => {
-  console.log(env)
   const PUBLIC_PATH = 'resources/exitus/libs/exitus-editor/dist/'
   const isProduction = argv.mode === 'production'
   return {