With 9.0.1 I can create a new theme that extends the OneUI IDX V1.3 theme by adding extends="oneui_idx_v1.3" in the start tag like so:
<theme extends="oneui_idx_v1.3"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">
<resources>
... *resources* ...
</resources>
</theme>
What do I specify for the extends attribute to extend the Mobile default theme?
The default mobile theme is actually a set of 3 themes: android.theme, iphone.theme and blackberry.theme, each applied as appropriate for the detected device. You can extend some or all of those by specifying android, iphone or blackberry in the extends attribute.
So your new theme file, e.g. myIphoneTheme.theme, would start with:
<theme extends="iphone" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
Then select the new theme in the xsp properties as your mobile theme or as your ios theme:
Related
I'm using Storybook v6.5.9 to render out my React/MUI components. Everything works fine, but I can't get the description or default value to appear in the canvas under the Controls tab:
The description appears fine when looking at the Docs tab:
There's nothing in the default export and I haven't changed any default options out of the box.
According to the React Storybook docs under controls here
Under the directory of .storybook/preview.js
We need to add the following under controls key
export const parameters = {
.....
controls: {
expanded: true
}
.....
}
This ensures that each control is viewed in expanded mode globally (both in Canvas and Docs tabs)
I have tried every possible popular code editor from npm but all of them refuse to display monospace fonts. I have tried ThemeProvider and inline style but it doesn't work. It displays phantom monospace fonts and actual font displayed is the default one. Apart from the code editor, monospace works in the Typography component. Apart from the font, all code editors work fine. Please help.
Shadow Root
With shadow root you can isolate from root css design. For documentation, see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
window.customElements.define('codemirror', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
// !! Shadow Root inside css rules you can change this
shadowRoot.innerHTML = `
<style>
#import url(https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css)
</style>`
// !! on ready you can change yourself CodeMirror constructor
this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});
}
});
HTML
Use custom element
<codemirror id="test"></codemirror>;
JS
get CodeMirror object from element.cm
var code = document.getElementById("test");
code.cm.setValue("var i = 0;");
I am trying to implement tinymce editor in my react app. But its call js from tinymce cloud. I want it to work locally. I went through the documentation of tinymce for local hosted js but couldn't implement it. Can someone help me to do so.
Thanks in advance.
import { Editor } from '#tinymce/tinymce-react';
.....
<Editor
style={{margin: "0px !important"}}
init={{
plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
height: 500
}}
initialValue={this.state.htmlContent}
onChange={this.handleEditorChange}
/>
I had the same problem, and it seems you need to import TinyMCE like this to initialize it:
import 'tinymce/tinymce';
Then, you can use the <Editor> component with a locally-hosted TinyMCE installation. You also need to import icons, themes, plugins, skins as needed.
I found this post helpful.
Please see the readme for the tinymce-react wrapper:
https://github.com/tinymce/tinymce-react
Loading TinyMCE by yourself
To opt out of using TinyMCE cloud you have
to make TinyMCE globally available yourself. This can be done either
by hosting the tinymce.min.js file by youself and adding a script tag
to you HTML or, if you are using a module loader, installing TinyMCE
with npm. For info on how to get TinyMCE working with module loaders
check out this page in the documentation.
What you have loaded via the import is just the wrapper that helps TinyMCE operate in React. You have not loaded TinyMCE itself. If you load TinyMCE before your React component is loaded the wrapper will not try to load TinyMCE from TinyMCE Cloud.
I'm using Create React App and I'd tried many things including the instructions on TinyMCE's website. Nothing worked for me until I found this blog post cited above by Derek Morrison.
I had to add these tinymce imports in addition to importing the React Editor component:
import 'tinymce/tinymce';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/table';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/ui/oxide/content.min.css';
import 'tinymce/skins/content/default/content.min.css';
import { Editor } from '#tinymce/tinymce-react';
How do we create new themes in Quill.js? Do we have to extend an existing one?
I'm only looking to update the look, not the functionality so theoretically I could just add a bunch of overrides for the default Snow theme but that's not ideal.
So - how and where do we go about creating and registering a new Quill.js theme?
I'm only looking to update the look, not the functionality so theoretically I could just add a bunch of overrides for the default Snow theme but that's not ideal.
I'm not sure re-defining all classes (there's plenty of them!) is a better solution rather than overriding the one you want.
Defining and registering a new theme won't magically solve your problem. A new theme would allow you to modify deeper the toolbar template, buttons icons and some behaviours.
BUT that being said, If you really want to create your custom theme, I would strongly suggest to extend snow or bubble existing ones, this is pretty straightforward.
(NB: at Wisembly Jam we do both: we created a new Theme to handle Bubble theme icons and replace them by ours, and we heavily override the desired classes)
NewTheme.js
// thx SO https://stackoverflow.com/questions/44625868/es6-babel-class-constructor-cannot-be-invoked-without-new
import BubbleTheme, { BubbleTooltip } from 'quilljs/themes/bubble'
import icons from 'quilljs/ui/icons'
class NewTheme extends BubbleTheme {
extendToolbar (toolbar) {
this.tooltip = new LoopTooltip(this.quill, this.options.bounds)
this.tooltip.root.appendChild(toolbar.container)
// you could override Quill's icons here with yours if you want
this.buildButtons([].slice.call(toolbar.container.querySelectorAll('button')), icons)
this.buildPickers([].slice.call(toolbar.container.querySelectorAll('select')), icons)
}
}
class NewThemeTooltip extends BubbleTooltip {
}
NewThemeTooltip.TEMPLATE = [
'<a class="ql-close"></a>',
'<div class="ql-tooltip-editor">',
'<input type="text" data-formula="e=mc^2" data-link="https://yoururl.com" data-video="Embed URL">',
'</div>',
'<span class="ql-tooltip-arrow"></span>'
].join('')
export { NewThemeTooltip, NewTheme as default }
App.js
import Quill from 'quill'
import NewTheme from './themes/NewTheme'
Quill.register('themes/newTheme', NewTheme, true)
const quill = new Quill(editorNode,{theme: 'newTheme'})
i am creating a web application using reactjs and antd. Now i want to add a feature in which user will select color and all the primary color or web application will be changed. I did searched on google but most of the people says that its not possible using antd . Just wondering if someone has tried before or is it doable ?
Antd supports setting a custom theme. You should use that to generate a theme based on what color the user chooses.
Example theme.js:
module.exports = () => {
return {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
};
};