Comments (9)
I needed a coffee, I think it works as following:
import { defineCustomElements } from '@papyrs/stylo/dist/components/stylo-editor';
defineCustomElements();
However doing so it won't work without installing in addition @stencil/core
as a dependency.
There are several issues open at Ionic and Stencil about it. Until these are solved there is no cleaner way to import it in vite projects I think.
ionic-team/ionic-framework#23823
from stylo.
For now the working solution is to import via unpkg
import "https://unpkg.com/@papyrs/[email protected]/dist/stylo/stylo.esm.js";
or
<script type="module" src="https://unpkg.com/@papyrs/[email protected]/dist/stylo/stylo.esm.js"></script>
Had to change stylo@alpha
to [email protected]
as it's returning 404
from stylo.
I think import '@papyrs/stylo'
won't work with vite. On the contrary, if I reckon correctly, using the custom elements will - should.
import { defineCustomElements } from '@papyrs/stylo/dist/loader';
defineCustomElements();
from stylo.
I think
import '@papyrs/stylo'
won't work with vite. On the contrary, if I reckon correctly, using the custom elements will - should.import { defineCustomElements } from '@papyrs/stylo/dist/loader'; defineCustomElements();
from stylo.
In a svelteki app I wasn't able to load the component as displayed above. As a workaround, I did as following:
onMount(async () => {
const {defineCustomElement} = await import(/* @vite-ignore */ '@papyrs/stylo/dist/components/stylo-editor');
defineCustomElement();
});
from stylo.
Another tricks, if you are looking to import plugins, these can be imported as following:
import {h1, h2, h3, ul} from '@papyrs/stylo/dist/stylo/index.esm';
from stylo.
also could load another component as following:
const {DeckgoDoc} = await import('@deckdeckgo/core/dist/components/deckgo-doc');
customElements.get('deckgo-doc') || customElements.define('deckgo-doc', DeckgoDoc);
```
from stylo.
in call case I needed @stencil/core
as a dependency and super important with the same version because there is a breaking change in v2.9.0
ionic-team/ionic-framework#24153
from stylo.
This has been solved thanks to an improvement in StencilJS and released in v0.0.38
See https://github.com/papyrs/stylo/releases/tag/v0.0.38
from stylo.
Related Issues (20)
- feat: shortkeys to apply style bold, italic, etc. or open hyperlinks
- feat: transform pasted url to link HOT 1
- Using inside of my Designer - Events not raised, Text not formated HOT 4
- Sample seems not to work any more HOT 1
- how to customize link functionality? HOT 6
- Android v12 keyboard focus HOT 2
- Integration of Stylo inside of other webcomponents HOT 12
- Info: Demonstration usage inside of webcomponents HOT 1
- CDN link is broken HOT 7
- Replace custom filterAttributesMutations with MutationObserver attributeFilter HOT 1
- delay "Press / for plugins"
- Reposition Poup after Font Size Change HOT 1
- color picker overlay height on brave HOT 2
- Selection mark disappear HOT 4
- Any chance for adding video to the widget? HOT 1
- A few odd behaviors. HOT 4
- Colors don't close HOT 2
- When typing Japanese, line breaks are automatically inserted. HOT 11
- Doesn't work with CDN HOT 1
- bug: key briefly appear on Android and disappear quickly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stylo.