I have a custom plugin in ckeditor5.
When user click on toolbar icon my plugin convert selected test to custom element with a custom attribute name comment-id.
this work properly.
Now I want to watch on click element and get comment-id on click and I don't know how can I do that.
this is the code of my custom plugin
import uploadIcon from './message.svg'
import ButtonView from '#ckeditor/ckeditor5-ui/src/button/buttonview'
import Plugin from '#ckeditor/ckeditor5-core/src/plugin'
import Command from '#ckeditor/ckeditor5-core/src/command'
import './comment.css'
export default class CustomFileExporerPlugin extends Plugin {
init() {
const editor = this.editor
const config = editor.config.get('comment')
console.log(editor.editing.view.document.isFocused)
editor.editing.view.document.on('click', a => {
console.log(a)
})
editor.model.schema.extend('$text', { allowAttributes: 'comment' })
editor.conversion.attributeToElement({
model: 'comment',
view: (commentId, writer) => {
debugger
if (writer) {
return writer.writer.createAttributeElement(
'comment',
{
'comment-id': commentId,
class: `ck-comment-marker`
},
{ priority: 5 }
)
}
}
})
editor.commands.add('comment', new CommentCommand(editor))
editor.ui.componentFactory.add('comment', locale => {
const view = new ButtonView(locale)
view.set({
label: 'add comment',
icon: uploadIcon,
tooltip: true
})
view.on('execute', async () => {
editor.editing.view.focus()
let id = await config.callback()
editor.execute('comment', { value: 'comment', id })
})
return view
})
}
}
class CommentCommand extends Command {
refresh() {
const model = this.editor.model
const doc = model.document
this.value = doc.selection.getAttribute('comment')
this.isEnabled = model.schema.checkAttributeInSelection(
doc.selection,
'comment'
)
}
execute(options = {}) {
const model = this.editor.model
const document = model.document
const selection = document.selection
const highlighter = options.value
model.change(writer => {
const ranges = model.schema.getValidRanges(
selection.getRanges(),
'comment'
)
if (selection.isCollapsed) {
const position = selection.getFirstPosition()
if (selection.hasAttribute('comment')) {
const isSameHighlight = value => {
return (
value.item.hasAttribute('comment') &&
value.item.getAttribute('comment') === this.value
)
}
const highlightStart = position.getLastMatchingPosition(
isSameHighlight,
{ direction: 'backward' }
)
const highlightEnd = position.getLastMatchingPosition(isSameHighlight)
const highlightRange = writer.createRange(
highlightStart,
highlightEnd
)
writer.removeAttribute('comment', highlightRange)
writer.removeSelectionAttribute('comment')
} else if (highlighter) {
writer.setSelectionAttribute('comment', highlighter)
}
} else {
for (const range of ranges) {
writer.setAttribute('comment', options, range)
}
}
})
}
}
When rendering editor, you can catch custom plugin click event using below code.
const command = editor.commands.get('comment')
command.on('execute', () => { catch click event in custom plugin})
Related
I am new to vue and I have just started using pinia. I wanna delete an item from array but it does not work
here is my store
import {defineStore} from 'pinia'
export interface ObjectDto {
input: string,
}
interface ObjectDtoInterface {
objects: Array<ObjectDto>
}
export const useSearchHistoryStore = defineStore('objectsStore', {
state: (): ObjectDtoInterface => {
return {
objects: [] as ObjectDto[]
}
},
actions: {
add(dto: ObjectDto) {
if (this.objects
.filter(shd => dto.input === shd.input)
.length === 0) {
this.objects.unshift(dto)
}
},
delete(obj: ObjectDto) {
this.objects = this.objects.filter(e => !(e.input === obj.input))
}
}
})
and here is the function from different .ts file
function delete(obj: ObjectDto) {
objectsStore.delete(obj)
}
add action works perfect, it adds item to the state but when I try to delete an item, nothing happens. The data I pass to delete method is 100% good because I checked this many times
Filter does not mutate the original object, you need to reasing
delete(obj: ObjectDto) {
this.objects = this.objects.filter(e => !(e.input === obj.input))
}
more info https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
I'm building an app with react-navigation-4.2.1. The app has multiple stack navigators. So there are a lots of navigation.push('Routename') calls.
Trouble is when the control surface (i.e. TouchableOpacity) is tapped rapidly multiple times (first one, and the rest during screen transition) I end up pushing multiple screens into the stack. Is there a way to restrict the surface to the first tap/call of push()?
The component below is what i use to make things touchable. it handle multiple touches in small period of time.
Use component below instead of TouchableOpacity. wrap any thing you want with this component and it will be touchable.
<SafeTouch
onPress={...}
>
<Text> hey! im a touchable text now</Text>
</SafeTouch>
The component below is written used TypeScirpt.
every touch within 300ms after first touch will be ignored(thats where help you with your problem).
import * as React from 'react'
import { TouchableOpacity } from 'react-native'
interface ISafeTouchProps {
onPress: () => void
onLongPress?: () => void
onPressIn?: () => void
onPressOut?: () => void,
activeOpacity?: number,
disabled?: boolean,
style: any
}
export class SafeTouch extends React.PureComponent<ISafeTouchProps> {
public static defaultProps: ISafeTouchProps = {
onPress: () => { },
onLongPress: () => { },
onPressIn: () => { },
onPressOut: () => { },
disabled: false,
style: null
}
private isTouchValid: boolean = true
private touchTimeout: any = null
public constructor(props: ISafeTouchProps) {
super(props)
{// Binding methods
this.onPressEvent = this.onPressEvent.bind(this)
}
}
public render(): JSX.Element {
return (
<TouchableOpacity
onPress={this.onPressEvent}
onLongPress={this.props.onLongPress}
onPressIn={this.props.onPressIn}
onPressOut={this.props.onPressOut}
activeOpacity={this.props.activeOpacity}
disabled={this.props.disabled}
style={[{minWidth: 24, minHeight: 24}, this.props.style]}
>
{
this.props.children
}
</TouchableOpacity>
)
}
public componentWillUnmount() {
this.clearTimeoutIfExists()
}
private onPressEvent(): void {
requestAnimationFrame(() => {
if (this.isTouchValid === false) {
return
}
this.isTouchValid = false
this.clearTimeoutIfExists()
this.touchTimeout = setTimeout(() => {
this.isTouchValid = true
}, 300)
if (typeof this.props.onPress === 'function') {
this.props.onPress()
}
})
}
private clearTimeoutIfExists(): void {
if (this.touchTimeout != null) {
clearTimeout(this.touchTimeout)
this.touchTimeout = null
}
}
}
This is the proper behavior for Push and it is not a bug if you want
to avoid the duplicate screen on double tab you can just use navigation.navigate.
To avoid pushing the screen more than once when clicking in the same button in a short span of time, I created a generic hook to avoid running a function more than once (accepting an interval to allow run again):
export const useCallOnce = <T extends unknown[], K>(
fn: (...args: T) => K,
allowAfter?: number,
) => {
const ref = React.useRef<number | undefined>();
const resultFn = (...args: T) => {
const now = new Date().getTime();
if (!ref.current || (allowAfter && ref.current + allowAfter < now)) {
ref.current = now;
return fn(...args);
}
};
return resultFn;
};
Then, you can just call it as in the following example:
const navigation = useNavigation<NativeStackNavigationProp<{ ExampleScreen: undefined }>>();
const push = useCallOnce(() => navigation.push('ExampleScreen'), 500);
// just call on the button click event as: onSomeEvent={() => push()}
You can create a generic button component that accept the push parameters with the hook above, similar to the example, and use this button whenever you want a button to navigate between pages.
I am using react-native-testing-library - https://callstack.github.io/react-native-testing-library/docs/getting-started
I have a <SegmentedControlIOS> - https://facebook.github.io/react-native/docs/segmentedcontrolios
I want to pres the first segment. I am doing this:
const testID = "SegmentedControl";
const stub = jest.fn();
const values = [{ label: "foo" }];
const { getByTestId } = render(
<SegmentedControlIOS values={['foo', 'bar']} onChange={stub} testID={testID} />
);
expect(() => {
getByTestId(testID);
}).not.toThrow();
fireEvent(getByTestId(testID), "change ", {
nativeEvent: {
value: values[0],
selectedSegmentIndex: 0,
},
});
However I get the error:
No handler function found for event: "change "
Screenshot below. Anyone know how to press different segments in <SegmentedControlIOS>?
fireEvent(element: ReactTestInstance, eventName: string, ...data:
Array): void
The change function is located in the fireEvent object. Here's how to use it:
Version 5 or later:
fireEvent.change(getByTestId(testID), { target: { value: values[0],selectedSegmentIndex: 0 } });
Version 5 or before:
const input = getByTestId(testID);
input.value = values[0];
input.selectedSegmentIndex = 0;
fireEvent.change(input);
If you want to check the onChange function of SegmentedControlIOS,
using fireEvent with native events that aren't already aliased by the fireEvent api.
// you can omit the `on` prefix
fireEvent(getByTestId(testID), 'onChange');
A solution was posted here, I didn't try it yet, but it looks more right I think - https://github.com/callstack/react-native-testing-library/issues/220#issuecomment-541067962
import React from "react";
import { SegmentedControlIOS } from "react-native";
import { fireEvent, render } from "react-native-testing-library";
const testID = "SegmentedControl";
const stub = jest.fn();
const values = [{ label: "foo" }];
const { getByTestId } = render(
<SegmentedControlIOS
values={["foo", "bar"]}
onChange={stub}
testID={testID}
/>,
);
it("sends events", () => {
fireEvent(getByTestId(testID), "onChange", {
nativeEvent: {
value: values[0],
selectedSegmentIndex: 0,
},
});
});
I have a file to save the random id to AsyncStorage.
AppService.js
import Rx from 'rxjs/Rx';
import uuid from 'uuid/v4'
import StorageService from '../storage/StorageService'
export default class AppService {
constructor() {
this.deviceuuid = null
}
rxInit() {
return StorageService.shared.get('deviceuuid').flatMap((deviceuuid) => {
if (deviceuuid == null) {
this.deviceuuid = uuid()
console.log('deviceuuid is empty, create one')
return StorageService.shared.set('deviceuuid', this.deviceuuid)
} else {
this.deviceuuid = deviceuuid
return Rx.Observable.of(this.deviceuuid)
}
}).do((deviceuuid) => {
console.log(`deviceuuid is ${deviceuuid}`)
})
}
}
AppService.shared = new AppService()
StorageService.js
import Rx from 'rxjs/Rx'
import { AsyncStorage } from 'react-native'
import Storage from 'react-native-storage'
let storage = new Storage({
size: 1000,
storageBackend: AsyncStorage,
defaultExpires: null,
})
export default class StorageService {
set(key, value) {
return Rx.Observable.fromPromise(storage.save({key: key, data: value})).map(() => value)
}
get(key) {
return Rx.Observable.fromPromise(storage.load({key: key})).catch(() => Rx.Observable.of(null))
}
remove(key) {
return Rx.Observable.fromPromise(storage.remove({key: key})).catch(() => Rx.Observable.of(null))
}
}
StorageService.shared = new StorageService()
When I build the project I can see deviceuuid is 14c629ee-0dc7-43ef-91c2-eed642271670
Now I want to get the deviceuuid from another screen.
componentWillMount() {
console.log('LoginScreen componentWillMount');
console.log('rxInit data =>', AppService.shared.rxInit())
let testId = StorageService.shared.get('deviceuuid')
console.log('testID', testId);
StorageService.shared.get('deviceuuid').flatMap((deviceuuid) => {
console.log('deviceuuid', deviceuuid);
this.setState({ uuid: deviceuuid })
}).do((deviceuuid) => {
console.log(`LoginScreen deviceuuid is ${deviceuuid}`)
})
}
the result like the image
I have no idea how to get deviceuuid.
and the code is not working. I can't see any console log result.
StorageService.shared.get('deviceuuid').flatMap((deviceuuid) => {
console.log('deviceuuid', deviceuuid);
this.setState({ uuid: deviceuuid })
}).do((deviceuuid) => {
console.log(`LoginScreen deviceuuid is ${deviceuuid}`)
})
I'm not familiar with rxjs, any help would be appreciated.
Here's my AppState class:
export default class AppState {
constructor() {
this.navigationState = {
index: 0,
routes: [{ key: "InitialView" }]
};
}
updateNavigationState(type, route = null) {
switch (type) {
case NavigationStateUpdateType.Push:
console.log(this.navigationState.routes.length);
console.log(this.navigationState.routes[0].key);
if (route !== null) {
console.log("Route: " + route);
this.navigationState = NavigationStateUtils.push(this.navigationState, { key: route });
}
case NavigationStateUpdateType.Pop:
this.navigationState = NavigationStateUtils.pop(this.navigationState);
}
}
}
Now if I do this inside InitialView:
this.props.appState.updateNavigationState(NavigationStateUpdateType.Push, "InitialView1");
Nothing happens. It seems like NavigationStateUtil.pushdoesn't work. Here's what the Console looks like:
AppState.js:18 1
AppState.js:19 InitialView
AppState.js:21 Route: InitialView1
AppState.js:18 1
AppState.js:19 InitialView
AppState.js:21 Route: InitialView1
AppState.js:18 1
AppState.js:19 InitialView
AppState.js:21 Route: InitialView1
Why isn't routes being updated? Or am I doing something wrong?
EDIT
My GlobalNavigation component (as asked):
const { CardStack: NavigationCardStack } = NavigationExperimental;
let GlobalNavigation = class GlobalNavigation extends Component {
render() {
return (React.createElement(NavigationCardStack, {renderScene: this._renderScene.bind(this), navigationState: this.props.appState.navigationState}));
}
_renderScene() {
return (React.createElement(InitialView, {appState: this.props.appState}));
}
};
By the way: all this code is generated by TypeSript.