Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] Propagated config data will be mutated by Editor.js initialization #1552

Closed
hata6502 opened this issue Feb 20, 2021 · 0 comments
Closed

[Bug] Propagated config data will be mutated by Editor.js initialization #1552

hata6502 opened this issue Feb 20, 2021 · 0 comments
Labels
bug

Comments

@hata6502
Copy link
Contributor

Describe a bug.
Propagated config data will be mutated by Editor.js initialization.

Steps to reproduce:

  1. Use the following example/example-dev.html
<!--
 Use this page for debugging purposes.

 Editor Tools are loaded as git-submodules.
 You can pull modules by running `yarn pull_tools` and start experimenting.
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Editor.js 🤩🧦🤨 example</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
  <link href="assets/demo.css" rel="stylesheet">
  <script src="assets/json-preview.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
  <div class="ce-example">
    <div class="ce-example__header">
      <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>

      <div class="ce-example__header-menu">
        <a href="https://github.com/editor-js" target="_blank">Plugins</a>
        <a href="https://editorjs.io/usage" target="_blank">Usage</a>
        <a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
        <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
      </div>
    </div>
    <div class="ce-example__content _ce-example__content--small">
      <div id="editorjs"></div>
      <div id="hint-core" style="text-align: center;">
        No core bundle file found. Run <code class="inline-code">yarn build</code>
      </div>
      <div id="hint-tools" style="text-align: center;">
        No submodules found. Run <code class="inline-code">yarn pull_tools</code>
      </div>
      <div class="ce-example__button" id="saveButton">
        editor.save()
      </div>
      <div class="ce-example__statusbar">
        Readonly:
        <b id="readonly-state">
          Off
        </b>
        <div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
          toggle
        </div>
      </div>
    </div>
    <div class="ce-example__output">
      <pre class="ce-example__output-content" id="output"></pre>

      <div class="ce-example__output-footer">
        <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
      </div>
    </div>
  </div>

  <!-- Load Tools -->
  <!--
   You can upload Tools to your project's directory and use as in example below.

   Also you can load each Tool from CDN or use NPM/Yarn packages.

   Read more in Tool's README file. For example:
   https://github.com/editor-js/header#installation
   -->
  <script src="./tools/header/dist/bundle.js" onload="document.getElementById('hint-tools').hidden = true"></script><!-- Header -->
  <script src="./tools/simple-image/dist/bundle.js"></script><!-- Image -->
  <script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
  <script src="./tools/list/dist/bundle.js"></script><!-- List -->
  <script src="./tools/checklist/dist/bundle.js"></script><!-- Checklist -->
  <script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
  <script src="./tools/code/dist/bundle.js"></script><!-- Code -->
  <script src="./tools/embed/dist/bundle.js"></script><!-- Embed -->
  <script src="./tools/table/dist/bundle.js"></script><!-- Table -->
  <script src="./tools/link/dist/bundle.js"></script><!-- Link -->
  <script src="./tools/raw/dist/bundle.js"></script><!-- Raw -->
  <script src="./tools/warning/dist/bundle.js"></script><!-- Warning -->

  <script src="./tools/marker/dist/bundle.js"></script><!-- Marker -->
  <script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->

  <!-- Load Editor.js's Core -->
  <script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true;"></script>

  <!-- Initialization -->
  <script>
    /**
     * To initialize the Editor, create a new instance with configuration object
     * @see docs/installation.md for mode details
     */
    const data = {
      blocks: []
    };

    console.log(JSON.stringify(data));

    var editor = new EditorJS({
      /**
       * Enable/Disable the read only mode
       */
      readOnly: false,

      /**
       * Wrapper of Editor
       */
      holder: 'editorjs',

      /**
       * Common Inline Toolbar settings
       * - if true (or not specified), the order from 'tool' property will be used
       * - if an array of tool names, this order will be used
       */
      // inlineToolbar: ['link', 'marker', 'bold', 'italic'],
      // inlineToolbar: true,

      /**
       * Tools list
       */
      tools: {
        /**
         * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
         */
        header: {
          class: Header,
          inlineToolbar: ['marker', 'link'],
          config: {
            placeholder: 'Header'
          },
          shortcut: 'CMD+SHIFT+H'
        },

        /**
         * Or pass class directly without any configuration
         */
        image: SimpleImage,

        list: {
          class: List,
          inlineToolbar: true,
          shortcut: 'CMD+SHIFT+L'
        },

        checklist: {
          class: Checklist,
          inlineToolbar: true,
        },

        quote: {
          class: Quote,
          inlineToolbar: true,
          config: {
            quotePlaceholder: 'Enter a quote',
            captionPlaceholder: 'Quote\'s author',
          },
          shortcut: 'CMD+SHIFT+O'
        },

        warning: Warning,

        marker: {
          class:  Marker,
          shortcut: 'CMD+SHIFT+M'
        },

        code: {
          class:  CodeTool,
          shortcut: 'CMD+SHIFT+C'
        },

        delimiter: Delimiter,

        inlineCode: {
          class: InlineCode,
          shortcut: 'CMD+SHIFT+C'
        },

        linkTool: LinkTool,

        raw: RawTool,

        embed: Embed,

        table: {
          class: Table,
          inlineToolbar: true,
          shortcut: 'CMD+ALT+T'
        },

      },

      /**
       * This Tool will be used as default
       */
      // defaultBlock: 'paragraph',

      /**
       * Initial Editor data
       */
      data,
      onReady: function(){
        console.log(JSON.stringify(data));
        console.log('Propagated config data should be immutable. ');

        saveButton.click();
      },
      onChange: function() {
        console.log('something changed');
      },
    });

    /**
     * Saving button
     */
    const saveButton = document.getElementById('saveButton');

    /**
     * Toggle read-only button
     */
    const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
    const readOnlyIndicator = document.getElementById('readonly-state');

    /**
     * Saving example
     */
    saveButton.addEventListener('click', function () {
      editor.save()
        .then((savedData) => {
          cPreview.show(savedData, document.getElementById("output"));
        })
        .catch((error) => {
          console.error('Saving error', error);
        });
    });

    /**
     * Toggle read-only example
     */
    toggleReadOnlyButton.addEventListener('click', async () => {
      const readOnlyState = await editor.readOnly.toggle();

      readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
    });
  </script>
</body>
</html>
  1. Open example-dev.html, and see console log.

Screenshot from 2021-02-20 12-09-06

Expected behavior:
Propagated config data should be immutable.

Editor.js version: v2.19.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hata6502