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

Optimize the rendering by using a diffing algorithm #1606

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

Optimize the rendering by using a diffing algorithm #1606

wants to merge 2 commits into from

Conversation

hata6502
Copy link
Contributor

@hata6502 hata6502 commented Mar 20, 2021 •
edited
Loading

@hata6502 hata6502 changed the title Diff render Optimize the rendering by using a diffing algorithm Mar 21, 2021
@hata6502
Copy link
Contributor Author

hata6502 commented Mar 21, 2021 •
edited
Loading

Demonstration program

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
     */
    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: {
        blocks: [
        {
            type : 'paragraph',
            data : {
              text: 'a'
            }
          },
          {
            type : 'paragraph',
            data : {
              text: 'b'
            }
          },
          {
            type : 'paragraph',
            data : {
              text: 'c'
            }
          },
          {
            type : 'paragraph',
            data : {
              text: 'd'
            }
          },
          {
            type : 'paragraph',
            data : {
              text: 'e'
            }
          },
        ]},
      onReady: function(){
        saveButton.click();
      },
      onChange: function() {
        console.log('something changed');
      },
    });

    setTimeout(async () => {
      await editor.blocks.render({
        blocks: [
        {
            type : 'paragraph',
            data : {
              text: 'a edited'
            }
          },
          /*{
            type : 'paragraph',
            data : {
              text: 'b'
            }
          },*/
          {
            type : 'paragraph',
            data : {
              text: 'c'
            }
          },
          {
            type : 'paragraph',
            data : {
              text: 'f added'
            }
          },
          /*{
            type : 'paragraph',
            data : {
              text: 'd'
            }
          },*/
          {
            type : 'paragraph',
            data : {
              text: 'e edited'
            }
          },
        ],
      });
    }, 3000);

    /**
     * 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>

@hata6502 hata6502 marked this pull request as ready for review March 21, 2021 19:09
@hata6502
Copy link
Contributor Author

hata6502 commented Apr 8, 2021

Resolved conflicts.

@hata6502 hata6502 mentioned this pull request May 7, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gohabereg gohabereg Awaiting requested review from gohabereg gohabereg is a code owner

@khaydarov khaydarov Awaiting requested review from khaydarov

@neSpecc neSpecc Awaiting requested review from neSpecc neSpecc is a code owner

At least 2 approving reviews are required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@hata6502