割烹エディター開発メモ12（code）

大分できてきて、あとはCodeブロックを作っておきます。

小説家になろうでcodeブロックを作ろうとすると、<>のエスケープが必須。

またpreコードを使うと文書が突き抜けるので、使いません。

改行のためのスタイルも試してみましたが、取り除かれるのでpreもcodeも使用しない方向でいきます。(codeも小説家になろう独自のスタイルが適用されて面倒)

class Code{
   static get enableLineBreaks() {
       return true;
   }
    constructor({data, config, api}) {
        this.api = api;

       this.placeholder = config.placeholder || Code.DEFAULT_PLACEHOLDER;

       this.CSS = {
         baseClass: this.api.styles.block,
         input: this.api.styles.input,
         wrapper: 'ce-code',
         textarea: 'ce-code__textarea'
       };

       this.nodes = {
         holder: null,
         textarea: null
       };

       this.data = {
         code: data.code || ''
       };

       this.nodes.holder = this.drawView();
    }
   drawView() {
       let wrapper = document.createElement('div'),
         textarea = document.createElement('textarea');

       wrapper.classList.add(this.CSS.baseClass, this.CSS.wrapper);
       textarea.classList.add(this.CSS.textarea, this.CSS.input);
       textarea.textContent = this.data.code;

       textarea.placeholder = this.placeholder;

       wrapper.appendChild(textarea);

       this.nodes.textarea = textarea;

       return wrapper;
     }
   
     render() {
       return this.nodes.holder;
     }
   
     save(codeWrapper) {
       return {
         code: this._escape(codeWrapper.querySelector('textarea').value)
       };
     }
   
     onPaste(event) {
       const content = event.detail.data;
       this.data = {
         code: content.textContent
       };
     }
   
     get data() {
       return this._data;
     }
   
     set data(data) {
       this._data = data;

       if (this.nodes.textarea) {
         this.nodes.textarea.textContent = data.code;
       }
     }
   _escape(str){
       return str.replace(/</g, '\&lt;').replace(/>/g, '\&gt;');
   }
   
     static get toolbox() {
       return {
         icon: `code`,
         title: 'Code（<>はエスケープされます）'
       };
     }
     static get DEFAULT_PLACEHOLDER() {
       return 'Enter code';
     }
   
     static get pasteConfig() {
       return {
         tags: [ 'code' ],
       };
     }
   
}

まぁこんな感じですね。

<と>はreplaceでエスケープされるようにしています。

なおcodeの色合いはNoteさんの色合いを使ってみました。

これで大体の装飾ができるようになったかな。