diff --git a/admin/src/components/Wysiwyg/index.js b/admin/src/components/Wysiwyg/index.js index b477dbf..d9791e6 100755 --- a/admin/src/components/Wysiwyg/index.js +++ b/admin/src/components/Wysiwyg/index.js @@ -58,7 +58,6 @@ Wysiwyg.defaultProps = { error: undefined, intlLabel: '', required: false, - value: '', }; Wysiwyg.propTypes = { diff --git a/admin/src/components/editorjs/index.js b/admin/src/components/editorjs/index.js old mode 100755 new mode 100644 index a12f15d..b67fe01 --- a/admin/src/components/editorjs/index.js +++ b/admin/src/components/editorjs/index.js @@ -1,14 +1,25 @@ -import React, { useState, useCallback } from 'react'; -import PropTypes from 'prop-types'; -import EditorJs from 'react-editor-js'; -import requiredTools from './requiredTools'; -import customTools from '../../config/customTools'; +import { useQueryParams } from "@strapi/helper-plugin"; +import DragDrop from "editorjs-drag-drop"; +import Undo from "editorjs-undo"; +import PropTypes from "prop-types"; +import React, { useCallback, useState } from "react"; +import EditorJs from "react-editor-js"; -import MediaLibAdapter from '../medialib/adapter' -import MediaLibComponent from '../medialib/component'; -import {changeFunc, getToggleFunc} from '../medialib/utils'; +import customTools from "../../config/customTools"; +import MediaLibAdapter from "../medialib/adapter"; +import MediaLibComponent from "../medialib/component"; +import { changeFunc, getToggleFunc } from "../medialib/utils"; +import { getI18N } from "./locales"; +import requiredTools from "./requiredTools"; + +const localStorageKey = "strapi-admin-language"; const Editor = ({ onChange, name, value }) => { + const [{ query }] = useQueryParams(); + const currentLanguage = + query.plugins?.i18n?.locale || + window.localStorage.getItem(localStorageKey) || + "en"; const [editorInstance, setEditorInstance] = useState(); const [mediaLibBlockIndex, setMediaLibBlockIndex] = useState(-1); @@ -38,28 +49,32 @@ const Editor = ({ onChange, name, value }) => { } } + const handleReady = (editor) => { + new Undo({ editor }); + new DragDrop(editor); + if(value && JSON.parse(value).blocks.length) { + editor.blocks.render(JSON.parse(value)) + } + if (document.querySelector('[data-tool="image"]')) { + document.querySelector('[data-tool="image"]').remove() + } + }; + return ( <>
{ - if(value && JSON.parse(value).blocks.length) { - api.blocks.render(JSON.parse(value)) - } - document.querySelector('[data-tool="image"]').remove() - }} - onChange={(api, newData) => { - if (!newData.blocks.length) { - newData = null; - onChange({ target: { name, value: newData } }); - } else { - onChange({ target: { name, value: JSON.stringify(newData) } }); - } + onReady={handleReady} + onChange={(api) => { + api.saver.save().then((res) => { + onChange({ target: { name, value: JSON.stringify(res) } }); + }); }} tools={{...requiredTools, ...customTools, ...customImageTool}} instanceRef={instance => setEditorInstance(instance)} + i18n={getI18N(currentLanguage)} />
{ + const baseLang = language.split("-")[0]; + let direction = "ltr"; + + if (language.textInfo === undefined) { + direction = RTL_LANGUAGES.includes(baseLang) ? "rtl" : "ltr"; + } else { + direction = language.textInfo.direction; + } + + return { + massages: messages[baseLang], + direction, + }; +}; + +export { getI18N }; diff --git a/admin/src/components/editorjs/locales/tr.json b/admin/src/components/editorjs/locales/tr.json new file mode 100644 index 0000000..bb61ec5 --- /dev/null +++ b/admin/src/components/editorjs/locales/tr.json @@ -0,0 +1,100 @@ +{ + "ui": { + "blockTunes": { + "toggler": { + "Click to tune": "Ayarlamak için tıklayın", + "or drag to move": "veya taşımak için sürükleyin" + } + }, + "inlineToolbar": { + "converter": { + "Convert to": "Dönüştür" + } + }, + "toolbar": { + "toolbox": { + "Add": "Ekle", + "Filter": "Filtre", + "Nothing found": "Hiçbir şey bulunamadı" + } + } + }, + "toolNames": { + "Image": "Resim", + "Embed": "Yerleştir", + "Table": "Tablo", + "List": "Liste", + "Warning": "Uyarı", + "Code": "Kod", + "Text": "Metin", + "Link": "Bağlantı", + "Raw HTML": "Ham HTML", + "Underline": "Alt çizgi", + "Heading": "Başlık", + "Paragraph": "Paragraf", + "Quote": "Alıntı", + "Marker": "İşaretleyici", + "Checklist": "Kontrol listesi", + "Delimiter": "Sınırlayıcı", + "InlineCode": "Satır İçi Kod", + "TuneAlignment": "Hizalama", + "Bold": "Kalın", + "Italic": "İtalik" + }, + "tools": { + "image": { + "Caption": "Altyazı", + "Couldn’t upload image. Please try another.": "Resim yüklenemedi. Lütfen başka bir tane deneyin.", + "Select an Image": "Bir Resim Seçin", + "With border": "Sınırlı", + "Stretch image": "Uzatılmış görüntü", + "With background": "Arka planlı" + }, + "embed": { "Enter a caption": "Bir başlık girin" }, + "table": { + "With headings": "Başlıklı", + "Without headings": "Başlıksız", + "Heading": "Başlık", + "Add row above": "Üst satır ekle", + "Add row below": "Aşağıya satır ekle", + "Delete row": "Satırı sil", + "Add column to left": "Soldan sütun ekle", + "Add column to right": "Sağa sütun ekle", + "Delete column": "Sütunu sil" + }, + "list": { + "Unordered": "Sırasız", + "Ordered": "Sıralı" + }, + "warning": { + "Title": "Başlık", + "Message": "Mesaj" + }, + "code": { "Enter a code": "Bir kod girin" }, + "link": { + "Link": "Bağlantı", + "Add a link": "Bağlantı ekle", + "Couldn't fetch the link data": "Bağlantı verileri getirilemedi", + "Couldn't get this link data, try the other one": "Bu bağlantı verisi alınamadı, diğerini deneyin", + "Wrong response format from the server": "Sunucudan yanlış yanıt biçimi" + }, + "raw": { + "Enter HTML code": "HTML kodunu girin" + }, + "quote": { "Quote": "Alıntı", "Quote's author": "Alıntının yazarı" }, + "stub": { + "The block can not be displayed correctly.": "Blok düzgün görüntülenemiyor." + } + }, + "blockTunes": { + "delete": { + "Delete": "Sil" + }, + "moveUp": { + "Move up": "Yukarı taşı" + }, + "moveDown": { + "Move down": "Aşağı taşı" + } + } +} diff --git a/admin/src/config/customTools.js b/admin/src/config/customTools.js index d725af8..f19c7f2 100644 --- a/admin/src/config/customTools.js +++ b/admin/src/config/customTools.js @@ -1,5 +1,6 @@ import PluginId from '../pluginId' +import Paragraph from '@editorjs/paragraph' import Embed from '@editorjs/embed' import Table from '@editorjs/table' import List from '@editorjs/list' @@ -13,6 +14,9 @@ import Marker from '@editorjs/marker' import CheckList from '@editorjs/checklist' import Delimiter from '@editorjs/delimiter' import InlineCode from '@editorjs/inline-code' +import Underline from '@editorjs/underline'; +import NestedList from '@editorjs/nested-list'; +import AlignmentTuneTool from 'editorjs-text-alignment-blocktune'; const customTools = { embed: Embed, @@ -21,7 +25,7 @@ const customTools = { inlineToolbar: true, }, list: { - class: List, + class: NestedList, inlineToolbar: true, }, warning: { @@ -43,16 +47,23 @@ const customTools = { class: Raw, inlineToolbar: true, }, + underline: Underline, header: { class: Header, inlineToolbar: true, + tunes: ['tuneAlignment'], + }, + paragraph: { + class: Paragraph, + inlineToolbar: true, + tunes: ['tuneAlignment'], }, quote: { class: Quote, inlineToolbar: true, config: { - quotePlaceholder: 'Quote', - captionPlaceholder: 'Quote`s author', + quotePlaceholder: "Quote", + captionPlaceholder: "Quote's author", }, }, marker: { @@ -65,6 +76,16 @@ const customTools = { }, delimiter: Delimiter, inlineCode: InlineCode, + tuneAlignment: { + class: AlignmentTuneTool, + config:{ + default: "left", + blocks: { + header: 'center', + list: 'right' + } + }, + } } export default customTools diff --git a/package.json b/package.json index 9b004ee..6159597 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "strapi-plugin-react-editorjs", "version": "0.0.0-development", + "private": true, "description": "Plugin for Strapi Headless CMS, hiding the standard WYSIWYG editor and replacing it with Editor.js", "homepage": "https://market.strapi.io/plugins/strapi-plugin-react-editorjs", "strapi": { @@ -12,10 +13,10 @@ "kind": "plugin" }, "dependencies": { + "@editorjs/editorjs": "^2.25.0", "@editorjs/checklist": "1.3.0", "@editorjs/code": "2.7.0", "@editorjs/delimiter": "1.2.0", - "@editorjs/editorjs": "2.23.2", "@editorjs/embed": "2.5.0", "@editorjs/header": "2.6.2", "@editorjs/image": "2.6.2", @@ -23,12 +24,17 @@ "@editorjs/link": "2.4.0", "@editorjs/list": "1.6.2", "@editorjs/marker": "1.2.2", + "@editorjs/nested-list": "^1.0.2", "@editorjs/paragraph": "2.8.0", "@editorjs/quote": "2.4.0", "@editorjs/raw": "2.3.0", "@editorjs/table": "2.0.1", + "@editorjs/underline": "^1.0.0", "@editorjs/warning": "1.2.0", "classnames": "^2.3.1", + "editorjs-text-alignment-blocktune": "^1.0.3", + "editorjs-drag-drop": "^1.1.5", + "editorjs-undo": "^2.0.8", "get-file-object-from-local-path": "1.0.2", "open-graph-scraper": "4.9.2", "react-editor-js": "1.10.0"