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.

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

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

Open
m-demydiuk opened this issue Aug 26, 2021 · 1 comment
Open

Comments

@m-demydiuk
Copy link

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?

@soccerloway
Copy link
Owner

soccerloway commented Sep 2, 2021

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,
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants