I'm hitting some problems extending Quill.
I want to modify the List and ListItem classes in Quill, so I tried to copy formats/list.js into my code base as a starting point. I then import my local copy and register it with Quill like so...
import { List, ListItem } from './quill/list';
Quill.register({
'formats/list': List,
'formats/list/item': ListItem
}, true);
However, when I attempt to create a list in the editor the code crashes in the List class with the following error:
ParchmentError {message: "[Parchment] Unable to create list-item blot", name: "ParchmentError"}
This happens on this line... https://github.com/quilljs/quill/blob/develop/formats/list.js#L99
I assume it relates to the imports I was forced to change, but I can't figure out what's wrong. I've not made any other changes to list.js. The original file has the following:-
import Block from '../blots/block';
import Container from '../blots/container';
Which I changed to this:-
import Quill from 'quill';
let Block = Quill.import('blots/block');
let Container = Quill.import('blots/container');
Is the way I am importing wrong? What is causing the error?
Figured it out (well a colleague did).
I needed to import Parchment like so :-
let Parchment = Quill.import('parchment');
instead of import Parchment from 'parchment';
This is because you'll end up with a different static Parchment class to the one used internally to Quill, so asking Quill for it's instance ensures you are both working with the same one (ie, the one where the blots were registered).
I came across that problem a couple hours ago.
In Quill's source code, List is a default export while ListItem is a named export.
So your import should look like this:
import List, { ListItem } from './quill/list';
Be sure to export them appropriately on your custom list.js file.
Good luck!
Related
I'm trying to use TypeScript and AgGrid and using an example similar to https://www.ag-grid.com/react-data-grid/column-sizing/#resizing-example
The issue is that when using TypeScript I get different values than when I'm trying to use regular JavaScript.The main property I'm trying to get back is api
https://gitpodio-templatetypescr-ze7tjimg9lm.ws-us43.gitpod.io/ - here is a gitpod that I created. If you look at the console.log I get most of the same properties, but I'm not getting the api property to make changes.
*** Edit ***
Actually one thing I just noticed is that if I use
import { AgGridReact } from 'ag-grid-react'; it works properly
but if I use
import { AgGridReact } from '#ag-grid-community/react'; it doesn't work. Why would there be a difference and what am I missing?
*** Edit 2 ***
Why do I need to at least put in one module to get the api? Is there a core module that I can put in, instead of something like the ClientSideRowModelModule to trigger the api?
When I import a public class in Flutter like this:
import 'package:wheel/src/log/app_log_handler.dart';
shows the waring:
Don't import implementation files from another package.
this is the waring detail:
why give this tips? what is the best way to handle it? I really want the log handler to public because I want all of my project use the same log handler, I do not want put the log handler to every project every time by the copy paste way.By the way, I import package like this:
wheel:
git:
url: https://github.com/jiangxiaoqiang/wheel.git
ref: main
TLDR
The package should have a file that only shows the selected files such as `'package:wheel/wheel.dart``
You should not import the 'package:wheel/src/log/app_log_handler.dart';directly.
Instead import 'package:wheel/wheel.dart`;
This import will export all required public types needed to work with the library.
Normally this files content will be just exports like this
export 'package:wheel/src/log/app_log_handler.dart';
export 'package:wheel/src/widgets/wheel_btn.dart';
export 'package:wheel/src/widgets/wheel_switch_two.dart';
export 'package:wheel/src/widgets/wheel_switch.dart';
See also the documentation on this.
On this fiddle https://jsfiddle.net/k2c5upfo/1/, extern modules are called using the import method. I don't use node on my project. I'd like to convert all these import files into regular javascript files. How can I built them without using node.js ?
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.118.2/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ShaderPass.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/RenderPass.js';
import { ClearPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/ClearPass.js';
import { MaskPass, ClearMaskPass } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/postprocessing/MaskPass.js';
import { CopyShader } from 'https://cdn.jsdelivr.net/npm/three#0.118.2/examples/jsm/shaders/CopyShader.js';
For example, I was able to call 'OrbitControls.js' on a older version of three.js by simply add another file. Can I still use this method ? Thank you
EDIT :
I managed to convert my workflow using es6 modules. I've been wondering if there's a way to only import specific modules. My generated output file has the same weight with theses two different lines.
import {Scene, PerspectiveCamera, WebGLRenderer, CylinderBufferGeometry, MeshNormalMaterial, Mesh} from "../node_modules/three/build/three.module.js";
import * THREE from "../node_modules/three/build/three.module.js";
Is there a way to only have the part of code that I need in my final output ? Thank you.
Using global scripts is actually deprecate since r117. At the end of the year, using ES6 modules is the only way of importing example files.
I don't use node on my project.
Not sure I understand this sentence. The above fiddle is unrelated to node.js. You can import ES6 modules directly in HTML files as long as you put the import statements into script tags that look like so:
<script type="module">
</script>
This approach is also used by the official examples.
my code is like:
import Render from './AppeRender';
import { Component } from 'react';
export default class appDB extends Component {
render () {
return Render.call(this, this.props, this.state);
}
}
and what i'm getting is:
Module parse failed: /home/projects/node_modules/DB/Db.js Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
Note: Error only comes in web setup, it's working fine in android and in IOS i haven't tried yet.
Does anyone have any idea regarding this.
I think what is wrong here is that you using import twice (and the second one is a destructure.
Try this instead:
import { Component } from 'react';
import Render from './AppeRender';
You can bind Component in one import.
The second import could have been changed to a straight destructure:
const { Component } = React;
But, there is no reason to do this if you are only using Component.
Using import on an Object is not really correct (however, it might work with some implementations), I assume that is why the error was occurring.
I'm attempting to write a Plone add-on that requires an "Add new" form. So far, I've managed to get this working very nicely using plone.directives.form.SchemaAddForm. I have the '##create-snippet' view registered in configure.zcml, and it works perfectly when I view the page normally.
However, the ultimate goal of this project is to get this add form into a TinyMCE popup window. I've created a working TinyMCE plugin for another, irrelevant portion of the add-on, and gotten that working well. However, when I try to navigate to my "##create-snippets" view in a tinyMCE window, I get:
LocationError: (Products.Five.metaclass.DirectoryResource2 object at 0x107162fd0, 'main_template')
My understanding of this issue is that, essentially, the SchemaAddForm class (or one of it's super classes, to be exact) wraps the form with the main Plone main_template when it renders the form. Since TinyMCE windows are their own, isolated little worlds, the template isn't available, and, therefore, cannot be rendered....or something like that? Please correct me if I'm way off.
What I really want to know, is if it's possible to set things up so only the form itself will render, without using the main_template? I would REALLY like to be able to take advantage of the schema-based forms (and their built-in validation), but still be able to keep everything within a TinyMCE window.
I've toyed around with creating my own ViewPageTemplateFile() template, and getting the form to render (somehow?) within it, but frankly, I have no idea how....or if that's even possible.
Please feel free to ask for more information if there's something I've omitted. I'm kinda new to this type of Plone development.
The code generating the form:
from Products.Five.browser import BrowserView
from uwosh.snippets.snippet import SnippetManager
from plone.directives.form import SchemaAddForm
import zope.interface
from plone.autoform.form import AutoExtensibleForm
import zope.schema
from plone.directives import form
import z3c
from Products.statusmessages.interfaces import IStatusMessage
_ = zope.i18nmessageid.MessageFactory(u'uwosh.snippets')
class ISnippet(form.Schema):
title = zope.schema.TextLine(
title=u'Title',
description=u'The title to associate with the snippet.',
required=True)
description = zope.schema.TextLine(
title=u'Description',
description=u'A short explanation of the snippet.',
required=True)
body = zope.schema.Text(
title=u'Body',
description=u'The actual content to be rendered on the page.',
required=True)
class SnippetForm(SchemaAddForm):
schema = ISnippet
#z3c.form.button.buttonAndHandler(_('Save'), name='save')
def handleAdd(self, action):
data, errors = self.extractData()
if errors:
self.status = self.formErrorsMessage
return
obj = self.createAndAdd(data)
if obj is not None:
# mark only as finished if we get the new object
self._finishedAdd = True
IStatusMessage(self.request).addStatusMessage(_(u"Snippet saved"), "info")
#z3c.form.button.buttonAndHandler(_(u'Cancel'), name='cancel')
def handleCancel(self, action):
IStatusMessage(self.request).addStatusMessage(_(u"Add New Snippet operation cancelled"), "info")
self.request.response.redirect(self.nextURL())
def create(self, data):
sm = SnippetManager()
#TODO:
#Include support for different folders from this form.
snippet = sm.createSnippet(data['title'], None ,data)
return snippet
def add(self, object):
#Since, for now, snippets are based upon ATDocuments, their creation is fairly staight-forward.
#So, we don't really need separate Add/Create steps.
return
def nextURL(self):
return self.context.absolute_url() + '/##create-snippet'