usar @suttyweb/editor
This commit is contained in:
void
f
parent
69577e6495
commit
7e0600779e
4 changed files with 20 additions and 118 deletions
|
|
@ -19,6 +19,10 @@ import {
|
|||
} from "editor/types/multimedia";
|
||||
import { setupAuxiliaryToolbar as setupMarkAuxiliaryToolbar } from "editor/types/mark";
|
||||
|
||||
/// @ts-ignore
|
||||
import SuttyEditor from "@suttyweb/editor";
|
||||
import "@suttyweb/editor/dist/style.css";
|
||||
|
||||
// Esta funcion corrije errores que pueden haber como:
|
||||
// * que un nodo que no tiene 'text' permitido no tenga children (se les
|
||||
// inserta un allowedChildren[0])
|
||||
|
|
@ -330,10 +334,15 @@ document.addEventListener("turbolinks:load", () => {
|
|||
".editor[data-editor]"
|
||||
)) {
|
||||
try {
|
||||
setupEditor(editorEl);
|
||||
new SuttyEditor({
|
||||
target: editorEl,
|
||||
props: {
|
||||
textareaEl: editorEl.parentElement!.querySelector("textarea"),
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
// TODO: mostrar error
|
||||
console.error("no se pudo iniciar el editor, error completo", error);
|
||||
console.error(error);
|
||||
alert(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,119 +9,6 @@
|
|||
.alert.alert-info
|
||||
:markdown
|
||||
#{t('editor.alert')}
|
||||
= text_area_tag "#{base}[#{attribute}]", '',
|
||||
= text_area_tag "#{base}[#{attribute}]", metadata.value.html_safe,
|
||||
dir: dir, lang: locale,
|
||||
**field_options(attribute, metadata), class: 'd-none'
|
||||
|
||||
-#
|
||||
el > se come el salto de línea y hace que los botones no tengan
|
||||
espacio adicional
|
||||
|
||||
TODO: Eliminar todo el espacio en blanco para minificar HTML
|
||||
.editor-toolbar{ style: 'z-index: 1' }
|
||||
.editor-primary-toolbar.scrollbar-black
|
||||
%button.btn{ type: 'button', title: t('editor.multimedia'), data: { editor_button: 'multimedia' } }>
|
||||
%i.fa.fa-fw.fa-upload>
|
||||
%span.sr-only>= t('editor.multimedia')
|
||||
%button.btn{ type: 'button', title: t('editor.bold'), data: { editor_button: 'mark-bold' } }>
|
||||
%i.fa.fa-fw.fa-bold>
|
||||
%span.sr-only>= t('editor.bold')
|
||||
%button.btn{ type: 'button', title: t('editor.italic'), data: { editor_button: 'mark-italic' } }>
|
||||
%i.fa.fa-fw.fa-italic>
|
||||
%span.sr-only>= t('editor.italic')
|
||||
%button.btn{ type: 'button', title: t('editor.mark'), data: { editor_button: 'mark-mark' } }>
|
||||
%i.fa.fa-fw.fa-tint>
|
||||
%span.sr-only>= t('editor.mark')
|
||||
%button.btn{ type: 'button', title: t('editor.link'), data: { editor_button: 'mark-link' } }>
|
||||
%i.fa.fa-fw.fa-link>
|
||||
%span.sr-only>= t('editor.link')
|
||||
%button.btn{ type: 'button', title: t('editor.deleted'), data: { editor_button: 'mark-deleted' } }>
|
||||
%i.fa.fa-fw.fa-strikethrough>
|
||||
%span.sr-only>= t('editor.deleted')
|
||||
%button.btn{ type: 'button', title: t('editor.underline'), data: { editor_button: 'mark-underline' } }>
|
||||
%i.fa.fa-fw.fa-underline>
|
||||
%span.sr-only>= t('editor.underline')
|
||||
%button.btn{ type: 'button', title: t('editor.super'), data: { editor_button: 'mark-super' } }>
|
||||
%i.fa.fa-fw.fa-superscript>
|
||||
%span.sr-only>= t('editor.super')
|
||||
%button.btn{ type: 'button', title: t('editor.sub'), data: { editor_button: 'mark-sub' } }>
|
||||
%i.fa.fa-fw.fa-subscript>
|
||||
%span.sr-only>= t('editor.sub')
|
||||
%button.btn{ type: 'button', title: t('editor.small'), data: { editor_button: 'mark-small' } }>
|
||||
%i.fa.fa-fw.fa-subscript>
|
||||
%span.sr-only>= t('editor.small')
|
||||
%button.btn.mr-0{ type: 'button', title: t('editor.h1'), data: { editor_button: 'block-h1' } }>
|
||||
%i.fa.fa-fw.fa-heading>
|
||||
1
|
||||
%span.sr-only>= t('editor.h1')
|
||||
%details.d-inline>
|
||||
%summary.d-inline>
|
||||
%span.btn.ml-0{ role: 'button', title: t('editor.more') }>
|
||||
%i.fa.fa-caret-right>
|
||||
%span.sr-only= t('editor.more')
|
||||
.d-inline>
|
||||
%button.btn{ type: 'button', title: t('editor.h2'), data: { editor_button: 'block-h2' } }>
|
||||
%i.fa.fa-fw.fa-heading>
|
||||
2
|
||||
%span.sr-only>= t('editor.h2')
|
||||
%button.btn{ type: 'button', title: t('editor.h3'), data: { editor_button: 'block-h3' } }>
|
||||
%i.fa.fa-fw.fa-heading>
|
||||
3
|
||||
%span.sr-only>= t('editor.h3')
|
||||
%button.btn{ type: 'button', title: t('editor.h4'), data: { editor_button: 'block-h4' } }>
|
||||
%i.fa.fa-fw.fa-heading>
|
||||
4
|
||||
%span.sr-only>= t('editor.h4')
|
||||
%button.btn{ type: 'button', title: t('editor.h5'), data: { editor_button: 'block-h5' } }>
|
||||
%i.fa.fa-fw.fa-heading>
|
||||
5
|
||||
%span.sr-only>= t('editor.h5')
|
||||
%button.btn{ type: 'button', title: t('editor.h6'), data: { editor_button: 'block-h6' } }>
|
||||
%i.fa.fa-fw.fa-heading>
|
||||
6
|
||||
%span.sr-only>= t('editor.h6')
|
||||
%button.btn{ type: 'button', title: t('editor.ul'), data: { editor_button: 'block-unordered_list' } }>
|
||||
%i.fa.fa-fw.fa-list-ul>
|
||||
%span.sr-only>= t('editor.ul')
|
||||
%button.btn{ type: 'button', title: t('editor.ol'), data: { editor_button: 'block-ordered_list' } }>
|
||||
%i.fa.fa-fw.fa-list-ol>
|
||||
%span.sr-only>= t('editor.ol')
|
||||
%button.btn{ type: 'button', title: t('editor.left'), data: { editor_button: 'parentBlock-left' } }>
|
||||
%i.fa.fa-fw.fa-align-left>
|
||||
%span.sr-only>= t('editor.left')
|
||||
%button.btn{ type: 'button', title: t('editor.center'), data: { editor_button: 'parentBlock-center' } }>
|
||||
%i.fa.fa-fw.fa-align-center>
|
||||
%span.sr-only>= t('editor.center')
|
||||
%button.btn{ type: 'button', title: t('editor.right'), data: { editor_button: 'parentBlock-right' } }>
|
||||
%i.fa.fa-fw.fa-align-right>
|
||||
%span.sr-only>= t('editor.right')
|
||||
|
||||
-# HAML cringe
|
||||
.editor-auxiliary-toolbar.mt-1.scrollbar-black{ data: { editor_auxiliary_toolbar: '' } }
|
||||
.form-group{ data: { editor_auxiliary: 'mark' } }
|
||||
%label{ for: 'mark-color' }= t('editor.color')
|
||||
%input.form-control{ type: 'color', name: 'mark-color' }/
|
||||
%label{ for: 'mark-text-color' }= t('editor.text-color')
|
||||
%input.form-control{ type: 'color', name: 'mark-text-color' }/
|
||||
|
||||
%div{ data: { editor_auxiliary: 'multimedia' } }
|
||||
.form-group
|
||||
.custom-file
|
||||
%input.custom-file-input{ type: 'file', id: 'multimedia-file', name: 'multimedia-file' }/
|
||||
%label.custom-file-label{ for: 'multimedia-file' }= t('editor.multimedia-select')
|
||||
.form-group
|
||||
%label{ for: 'multimedia-alt' }= t('editor.description')
|
||||
%input.form-control{ type: 'text', id: 'multimedia-alt', name: 'multimedia-alt' }/
|
||||
.form-group
|
||||
%button.btn{ type: 'button', id: 'multimedia-file-upload', name: 'multimedia-file-upload' }= t('editor.multimedia-upload')
|
||||
%button.btn{ type: 'button', id: 'multimedia-remove', name: 'multimedia-remove' }= t('editor.multimedia-remove')
|
||||
|
||||
.form-group{ data: { editor_auxiliary: 'link' } }
|
||||
%label{ for: 'link-url' }= t('editor.url')
|
||||
%input.form-control{ type: 'url', id: 'link-url', name: 'link-url' }/
|
||||
|
||||
.editor-aviso-word.alert.alert-info
|
||||
%p= t('editor.word')
|
||||
|
||||
.editor-content.form-control.h-auto.mt-1{ contenteditable: 'true' }
|
||||
= metadata.value.html_safe
|
||||
**field_options(attribute, metadata)
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"@rails/activestorage": "^6.1.3-1",
|
||||
"@rails/ujs": "^6.1.3-1",
|
||||
"@rails/webpacker": "5.2.1",
|
||||
"@suttyweb/editor": "^0.0.3",
|
||||
"babel-loader": "^8.2.2",
|
||||
"circular-dependency-plugin": "^5.2.2",
|
||||
"commonmark": "^0.29.0",
|
||||
|
|
|
|||
|
|
@ -1171,6 +1171,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-1.1.1.tgz#eff60cd4e58b921d1a2764dc5215f5141510f2c2"
|
||||
integrity sha512-XOkqSw53N9072FLHvpLM25PIwy+ndkSSbnTtjKuyzsv8K5yfkFB2rv68jU1pzqYa9FZLcvZWP4yazC0V38dx9A==
|
||||
|
||||
"@suttyweb/editor@^0.0.3":
|
||||
version "0.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.0.3.tgz#6572b9d29fe1c3adf36c4cfc4ee152453ba15c0f"
|
||||
integrity sha512-mFh3cWpA/9vNlqKHBLjPVjCOzDH8HaBL+CwAGtiQoFUhxx8gaUiAfBGZGOE/KK9IcD/xDVTkG6q6HYZ6iIQIFQ==
|
||||
|
||||
"@types/caseless@*":
|
||||
version "0.12.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8"
|
||||
|
|
|
|||
Loading…
Reference in a new issue