I`m using EditorJS (https://editorjs.io/)
I have a hidden div with editor holder in it and a separate button (Add new for ex)
I need this div to appear when user click on the button
everything is working fine
but I can't set up autofocus so that the user doesn't click on the holder to start working with editor
i tried doing
setTimeout(function(){ $('#editor').click()}, 100);
but it doesn't work
If I understood your growth correctly
https://editorjs.io/configuration#autofocus
There a config key:
const editor = new EditorJS(
autofocus: true
})
Ok, here is the solution:
<div id="editorjs"></div>
<button id="focus">focus</button>
And initialization :
const editor = new EditorJS({
holder: 'editorjs',
onReady: function () {
const btn = document.querySelector("#focus");
btn.addEventListener("click", () => editor.focus())
}
})
And link for example : https://codepen.io/Ashley100/pen/mdEqoRY?editors=1010
Related
I am having an issue with MDC web textfield component. The issue is that the outline does not stay when I click on the textfield to type in an input. See below for the pug and javascript code :
div.mdc-layout-grid__cell--span-4.mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-tablet
label.mdc-text-field.mdc-text-field--filled
span.mdc-text-field__ripple
span.mdc-floating-label(id="first_name") First Name :
input.mdc-text-field__input(type="text" aria-labelledby="first_name")
span.mdc-line-ripple
div.mdc-layout-grid__cell--span-4.mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-tablet
label.mdc-text-field.mdc-text-field--outlined
span.mdc-notched-outline
span.mdc-notched-outline__leading
span.mdc-notched-outline__notch
span.mdc-floating-label(id="last_name") Surname :
span.mdc-notched-outline__trailing
input.mdc-text-field__input(type="text" aria-labelledby="last_name")
const textFields = [].map.call(document.querySelectorAll('.mdc-text-field'), function (el) {
return new mdc.textField.MDCTextField(el);
});
const notchedOutline = [].map.call(document.querySelectorAll('.mdc-notched-outline'), function (el) {
return new mdc.notchedOutline.MDCNotchedOutline(el);
});
const floatingLabel = [].map.call(document.querySelectorAll('.mdc-floating-label'), function (el) {
return new mdc.floatingLabel.MDCFloatingLabel(el);
});
const lineRipple = [].map.call(document.querySelectorAll('.mdc-line-ripple'), function (el) {
return new mdc.lineRipple.MDCLineRipple(el);
});
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/E8t9g.png
The primary color of the website was white and this made it look as though it disappeared when it was actually just white. When you change the primary color of the website, it reflects on the textfield as well.
On the project where I work (React, TS), we use the viewer and added the Box Selection extension for it.
The first time you activate it with a button in the toolbar, the extension works, the elements are highlighted. Then you can switch to another mode, for example, the orbit mode. And after that, when you click on the button that activates the "box Selection extension", the extension no longer works. The orbit mode remains working.
At the same time, the button is clicked (console.log() is fired) and the loadExtension('Autodesk.Box Selection') method works.
What could be the problem?
I will give some code snippets
This is the extension code:
export default function RectangleSelectionExtension(
this,
viewer,
options,
) {
window.Autodesk.Viewing.Extension.call(this, viewer, options);
}
RectangleSelectionExtension.prototype = (
Object.create(window.Autodesk.Viewing.Extension.prototype)
);
RectangleSelectionExtension.prototype.constructor = RectangleSelectionExtension;
RectangleSelectionExtension.prototype.load = () => true;
RectangleSelectionExtension.prototype.unload = () => true;
RectangleSelectionExtension.prototype.onToolbarCreated = function onToolbarCreated() {
this.group = this.viewer.toolbar.getControl('allExtensionsToolbar');
if (!this.group) {
this.group = new window.Autodesk.Viewing.UI.ControlGroup('allExtensionsToolbar');
this.viewer.toolbar.addControl(this.group);
}
// Add a new button to the toolbar group
this.button = new window.Autodesk.Viewing.UI.Button('RectangleSelectionExtension');
this.button.onClick = async () => {
const boxSelectionExtension = await this.viewer.loadExtension('Autodesk.BoxSelection');
this.viewer.toolController.activateTool(boxSelectionExtension.boxSelectionTool.getName());
boxSelectionExtension.addToolbarButton(this.viewer);
};
this.button.setToolTip('Select within a rectangle area');
this.button.addClass('RectangleSelectionExtension');
this.group.addControl(this.button);
};
window.Autodesk.Viewing.theExtensionManager.registerExtension('BoxSelection', RectangleSelectionExtension);
Next, in the Viewer component, we import and register the extension:
window.Autodesk.Viewing.theExtensionManager.registerExtension('RectangleSelectionExtension', RectangleSelectionExtension);
And this is how we initialize the viewer:
window.Autodesk.Viewing.Initializer(options, () => {
const container = document.getElementById('forgeViewer');
if (container) {
viewer = new window.Autodesk.Viewing.GuiViewer3D(
container,
{
token,
extensions: [
/* ...some extensions */
'RectangleSelectionExtension',
],
},
);
const startedCode = viewer.start();
if (startedCode > 0) {
return;
}
/* ...some eventListeners */
}
I'm not sure I understand the purpose of your RectangleSelectionExtension. From the code it looks like it just adds a button in the toolbar, and clicking that button repeatedly loads another extension (Autodesk.BoxSelection), repeatedly activates the box selection tool, and repeatedly adds the box selection button to the toolbar. That doesn't seem right.
If you're simply interested in the box selection, you can load it (and include it in the toolbar) like so:
// ...
viewer = new window.Autodesk.Viewing.GuiViewer3D(
container,
{
token,
extensions: [
/* ...some extensions */
'Autodesk.BoxSelection',
]
}
);
// and later ...
const boxSelectionExt = viewer.getExtension('Autodesk.BoxSelection');
boxSelectionExt.addToolbarButton(true); // Add the button to the toolbar
boxSelectionExt.addToolbarButton(false); // Remove the button from the toolbar
// ...
With draft-js and a styled component, I made an inline input intended for a calculator. When I type into it with a keyboard, it works as expected:
When I press the plus button, a "+" is added to the text, but the view doesn't scroll:
Here's the behavior and the code in a codesandbox:
https://codesandbox.io/s/charming-brattain-mvkj3?from-embed=&file=/src/index.js
How can I get the view to scroll when text is added programmatically like that?
At long last, I figured out a solution. I added this to the calculator input component:
const shell = React.useRef(null);
const [scrollToggle, setScrollToggle] = React.useState(
{ value: false }
);
React.useEffect(() => {
const scrollMax = shell.current.scrollWidth - shell.current.clientWidth;
shell.current.scrollLeft += scrollMax;
}, [scrollToggle]);
const scrollToEnd = () => {
setScrollToggle({ value: !scrollToggle.value });
};
Then at the end of the insertChars function I added scrollToEnd();.
And I set ref={shell} on <InputShell>
Is it possible to link two elements together so changing contents of one automatically changes contents of the other using jquery or angular?
I have an app where I want the title of an element, which appears a few times throughout the app, to be the same. So for example, when i click on one button called "open window 1", it opens window 1 and when i click on another button also called "open window 1" it also opens window 1.
What im trying to achieve is if i change the title of 1 button, to try to make it change the title of the other button in real time. Remember i have around 20 different buttons on the app, where each has a twin that should be linked together.
In basic terms i just want to link the two buttons together so they are like a mirror image of each other. Is this some feature/function Angular JS has?
The last time I used Angular was a while ago, and it was mostly with Angularjs rather than Angular, so this is just a brief gist to give you an idea of what I mean, which you'd have to tailor to your needs
You could do something like creating a global module somewhere, such as:
buttons.ts:
interface ButtonInfo {
title: string,
onClick: Function
}
const button1: ButtonInfo = {
title: 'Open Window 1',
onClick: openWindow1()
};
const updateButton1 = update => {
if (update.title) button1.title = update.title;
if (update.onClick) button1.onClick = update.onClick;
};
const button2: ButtonInfo = {
title: 'Open Window 2',
onClick: openWindow2()
};
const updateButton2 = update => {
if (update.title) button2.title = update.title;
if (update.onClick) button2.onClick = update.onClick;
};
export {
button1,
updateButton1,
button2,
updateButton2,
ButtonInfo
};
Then you could import this wherever your pairs of buttons are:
button1.component.ts:
import { button1, updateButton1 } from './buttons';
import type { ButtonInfo } from './buttons';
export class Button1Component {
button1: ButtonInfo = button1;
...
updateButton(update) {
updateButton1(update);
}
}
button1.component.html:
<div>
...
<button (click)="button1.onClick()">
{{button1.title}}
</button>
</div>
I'm using ng-bootstrap#6.0.0. Some modal dialogs are opening very quickly, while others are opening extremely slowly (sometimes taking 15 seconds to open).
The slow behavior is: The modal window shows with a maximum width regardless of the size selected, but has not modal-body content (yet). Approximately 15 seconds later, the modal window resizes to the requested size, and then populates with the modal-body as expected.
I have compared the modal components that work fine with the modal components that don't, and see very few differences aside from functionality differences like you would expect.
I've tried changing the "backdrop", I've tried setting the "container", I've tried converting the modal between an in-line ng-template and a separate component. Nothing is changing the behavior of the slow modals.
Does anyone have any ideas?
I am using ngx-simplemde, and launching a modal from a custom toolbar item in the markdown editor. For some reason, when launching a modal, popover, or tooltip from within the markdown editor, it behaves very slowly. I had to abstract my logic out of the custom ngx-simplemde toolbar button and trigger the modal being opened from outside the ngx-simplemde custom toolbar item. This was fairly difficult to figure out, as I had to create a hidden button, and then trigger the hidden button using the DOM's .click() method, and the ngClick of the button was setup to initiate the modal popup. Not ideal, fairly hacky, but it works now.
component.html
<simplemde [(ngModel)]="value" [options]="{ toolbar: toolbar }" (ngModelChange)="valueChange.emit($event)" #smde></simplemde>
<button type="button" class="btn btn-primary" (click)="insertImage()" style="display: none" #buttonElement>Test</button>
component.ts
createImageListToolbar() {
return {
name: 'image-list',
className: 'fas fa-images',
title: this.imageListButtonTitle,
// This action is called when the user clicks the button
// It will open the imageListModal that is embedded in the HTML of this component
// When the modal closes, the user will have selected the image they want inserted
action: async () => {
this.buttonEle.nativeElement.click();
}
};
}
async insertImage() {
const image = await this.modalService.getMediaSelection(this.implementationGuideId, this.mediaReferences);
const doc = this.simplemde.Instance.codemirror.getDoc();
const cursor = doc.getCursor();
const altTag = image.title ? `alt="${image.title}" ` : '';
const replaceText = `<table><tr><td><img src="${image.name}" ${altTag}/></td></tr></table>`;
doc.replaceRange(replaceText, cursor);
}
modal.service.ts:
async getMediaSelection(implementationGuideId?: string, mediaReferences?: MediaReference[]): Promise<ImageItem> {
const modalRef = this.modalService.open(MediaSelectionModalComponent, { container: 'body', backdrop: 'static' });
modalRef.componentInstance.implementationGuideId = implementationGuideId;
modalRef.componentInstance.mediaReferences = mediaReferences;
return await modalRef.result;
}
This could be caused by change detection issues.
Try to open modal in change detection zone.
Inject Zone:
constructor(
private modalService: NgbModal,
private zone: NgZone,
) { }
and wrap modalService.open with zone.run:
confirmDelete(user: DSUser): void {
this.zone.run(() => {
const modalRef = this.modalService.open(ConfirmModalComponent, {
backdrop: true,
centered: true,
}).componentInstance;
modalRef.message = `<strong>Are you sure you want to delete <span class="text-primary">"${user.name.firstName} ${user.name.lastName}"</span> profile?</strong>`;
modalRef.confirmCallback = () => this.deleteUser.emit(user);
});
}