kaaaaaaaaaaai / editorjs-alignment-blocktune

54 stars 26 forks source link

TypeError: this.constructable is not a constructor #1

Open d4rxt4r opened 3 years ago

d4rxt4r commented 3 years ago

Hi, this block tune is a musthave but i'm getting an error, can you help me plz?

import AlignmentBlockTune from "editorjs-text-alignment-blocktune";

...

          alignmentSetting: {
            class: AlignmentBlockTune,
            config: {
              default: "right",
              blocks: {
                header: "center",
                list: "right",
              },
            },
          },

image

kaaaaaaaaaaai commented 3 years ago

@d4rxt4r Can you show me the full code, please?

I'll fix the bug.

d4rxt4r commented 3 years ago

I'm using vue-editor-js

<template>
  <editor ref="editor" class="bg-white rounded" :config="config" />
</template>

<script>
import Image from "@editorjs/image";
// import Header from "@editorjs/header";
import Header from "editorjs-header-with-anchor";
import List from "@editorjs/list";
import CodeTool from "@editorjs/code";
import Paragraph from "@editorjs/paragraph";
import Embed from "@editorjs/embed";
import Table from "@editorjs/table";
import Checklist from "@editorjs/checklist";
import Marker from "@editorjs/marker";
import Warning from "@editorjs/warning";
import RawTool from "@editorjs/raw";
import Quote from "@editorjs/quote";
import InlineCode from "@editorjs/inline-code";
import Delimiter from "@editorjs/delimiter";
import LinkTool from "@editorjs/link";
import Carousel from "./carousel/dist/bundle.js";
import AnyButton from "editorjs-button";
import Underline from "@editorjs/underline";
import AlignmentBlockTune from "editorjs-text-alignment-blocktune";

export default {
  props: ["blocks"],
  data() {
    return {
      config: {
        tools: {
          header: {
            class: Header,
            config: {
              defaultLevel: 3,
              inlineToolbar: true,
            },
          },
          paragraph: {
            class: Paragraph,
          },
          underline: Underline,
          list: {
            class: List,
            inlineToolbar: true,
          },
          linkTool: LinkTool,
          embed: {
            class: Embed,
            config: {
              services: {
                youtube: true,
              },
            },
          },
          warning: {
            class: Warning,
            inlineToolbar: true,
            shortcut: "CMD+SHIFT+W",
            config: {
              titlePlaceholder: "Заголовок",
              messagePlaceholder: "Сообщение",
            },
          },
          inlineCode: {
            class: InlineCode,
            shortcut: "CMD+SHIFT+L",
          },
          marker: {
            class: Marker,
            shortcut: "CMD+SHIFT+M",
          },
          table: {
            class: Table,
            inlineToolbar: true,
            config: {
              rows: 2,
              cols: 3,
            },
          },
          delimiter: Delimiter,
          quote: {
            class: Quote,
            inlineToolbar: true,
            shortcut: "CMD+SHIFT+O",
            config: {
              quotePlaceholder: "Цитата",
              captionPlaceholder: "Автор",
            },
          },
          checklist: {
            class: Checklist,
            inlineToolbar: true,
          },
          code: {
            class: CodeTool,
          },
          image: {
            class: Image,
            config: {
              endpoints: {
                byFile: "/image",
                byUrl: "/image-by-url",
              },
              field: "image",
              types: "image/*",
            },
          },
          carousel: {
            class: Carousel,
            config: {
              endpoints: {
                byFile: "/image",
              },
            },
          },
          raw: RawTool,
          AnyButton: {
            class: AnyButton,
            inlineToolbar: false,
            shortcut: "CMD+SHIFT+B",
          },
          alignmentSetting: {
            class: AlignmentBlockTune,
            config: {
              default: "right",
              blocks: {
                header: "center",
                list: "right",
              },
            },
          },
        },
        data: this.blocks,
      },
    };
  },
};
</script>
kaaaaaaaaaaai commented 3 years ago

I can't reproduce it in my computer.

Can you prepare codepen, vue playground, or else

lichingchester commented 3 years ago
  1. const AlignmentTuneTool = require("editorjs-text-alignment-blocktune");
  2. tunes: ["alignment"],
  3. alignment: {
      class: AlignmentTuneTool,

error: Paste handling for «alignment» Tool hasn't been set up because of the error TypeError: this.constructable is not a constructor

question: Can you explain what is the class AlignmentTuneTool we need to put into the tunes? In your example , also no defined for alignmentBlockTune.