How to correctly import quill-better-table in custom quill bundle?

[Maksym Demydiuk]

Quill version: 2.0.0-dev.4

Using Quill from quill npm package like import Quill from 'quill', imports quill.js from node_modules/quill/quill.js .
It leads that all quill modules are included in bundle - all blots, formats, modules, themes...
So we decided to create custom Quill bundle.

For this I created in my project quill.core.js file and import only needed modules:

import Quill from 'quill/core';

import { AlignClass, AlignStyle } from 'quill/formats/align';

import Header from 'quill/formats/header';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Link from 'quill/formats/link';
import Strike from 'quill/formats/strike';
import Underline from 'quill/formats/underline';

import Image from 'quill/formats/image';
import Video from 'quill/formats/video';

import Table from 'quill/modules/table';
import Toolbar from 'quill/modules/toolbar';

import Icons from 'quill/ui/icons';

import SnowTheme from 'quill/themes/snow';


Quill.register(
    {
        'attributors/class/align': AlignClass,
        'attributors/style/align': AlignStyle,
    },
    true,
);

Quill.register(
    {
        'formats/align': AlignClass,
        'formats/header': Header,

        'formats/bold': Bold,
        'formats/italic': Italic,
        'formats/link': Link,
        'formats/strike': Strike,
        'formats/underline': Underline,

        'formats/image': Image,
        'formats/video': Video,

        'modules/table': Table,
        'modules/toolbar': Toolbar,

        'themes/snow': SnowTheme,

        'ui/icons': Icons,
    },
    true,
);

export default Quill;

Then, using custom quill core, I register custom formats and modules in file quill.js:

import Quill from './quill.core';

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill-better-table/dist/quill-better-table.css";

import Breaker from "./blots/breaker";

import Hr from "./formats/hr";
import MediaLibrary from "./formats/mediaLibrary";
import List from './formats/list';

import PlainClipboard from "./modules/PlainClipboard";

import QuillBetterTable from "quill-better-table";
import htmlEditButton from "quill-html-edit-button";

import BlotFormatter, {
    DeleteAction,
    ImageSpec,
    ResizeAction,
} from "quill-blot-formatter";

class CustomImageSpec extends ImageSpec {
    getActions() {
        return [ResizeAction, DeleteAction];
    }
}

Quill.register(
    {
        'blots/breaker': Breaker,

        "formats/hr": Hr,
        "formats/mediaLibrary": MediaLibrary,
        'formats/list': List,

        "modules/better-table": QuillBetterTable,
        "modules/htmlEditButton": htmlEditButton,
        "modules/clipboard": PlainClipboard,
        "modules/blotFormatter": BlotFormatter
    },
    true,
);

export { CustomImageSpec, QuillBetterTable, Quill as default };

Everything works perfect and as expected. EXCEPT QUILL-BETTER-TABLE!

I think it's because when I do import QuillBetterTable from "quill-better-table"; internally QuillBetterTable uses Quill from quill package like import Quill from 'node_modules/quill' instead my custom quill that created. Or maybe I am missing something. Could you please help me to understand how to correctly use quill better table in such case?

[Loway]

Quill.register(
    {
        'formats/align': AlignClass,
        'formats/header': Header,

        'formats/bold': Bold,
        'formats/italic': Italic,
        'formats/link': Link,
        'formats/strike': Strike,
        'formats/underline': Underline,

        'formats/image': Image,
        'formats/video': Video,

        'modules/table': Table,  //  Remove this line
        'modules/toolbar': Toolbar,

        'themes/snow': SnowTheme,

        'ui/icons': Icons,
    },
    true,
);