How would I make it so that users can only write task list items?
LinguiniThePasta opened this issue · 3 comments
Hi all, I hope this question is fine for this repository.
I want to make a shopping list application (there's more to it than this, this is just a small part of a bigger app) where the user can add task list items to the list. However, I don't want to allow the user to do anything OTHER than that. I only want the user to have the ability to 1) add a new task list, and 2) undo/redo
Here is my code currently:
import React from 'react';
import {SafeAreaView, StyleSheet, Platform, KeyboardAvoidingView, useWindowDimensions} from 'react-native';
import {BridgeExtension, TenTapStartKit, CoreBridge, TaskListBridge, HistoryBridge, useEditorBridge} from '@10play/tentap-editor'
import {RichText, Toolbar} from '@10play/tentap-editor'
import {useSafeAreaInsets} from "react-native-safe-area-context";
export default function TenTap() {
const editor = useEditorBridge({
bridgeExtensions: [
CoreBridge,
TaskListBridge,
HistoryBridge
],
autofocus: true,
avoidIosKeyboard: true,
initialContent
});
const { top } = useSafeAreaInsets();
const { width, height } = useWindowDimensions();
const isLandscape = width > height;
const headerHeight = isLandscape ? 32 : 44;
const keyboardVerticalOffset = headerHeight + top;
return (
<SafeAreaView style={exampleStyles.fullScreen}>
<RichText editor={editor}/>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={exampleStyles.keyboardAvoidingView}
keyboardVerticalOffset={keyboardVerticalOffset} // <--- add this
>
<Toolbar editor={editor}/>
</KeyboardAvoidingView>
</SafeAreaView>
);
};
const exampleStyles = StyleSheet.create({
fullScreen: {
flex: 1,
},
keyboardAvoidingView: {
position: 'absolute',
width: '100%',
bottom: 0,
},
});
const initialContent = `<p>This is a basic example!</p>`;
Currently, if a user double taps "Enter" on an empty line, the line goes back to being a plaintext line. I don't want this to happen. I want the default to be a task list item. How can I do this? I did not see anything on the docs about this.
Hey, I think you should be able to do this by update the document schema see https://10play.github.io/10tap-editor/docs/examples/configureExtensions#extending-extension-and-updating-document-schema
Maybe try
CoreBridge.extendExtension({ content: 'taskList+'})
Thanks! it works.
Here's the part I changed for future people:
const editor = useEditorBridge({
bridgeExtensions: [
CoreBridge.extendExtension({ content: 'taskList+'}),
TaskListBridge,
HistoryBridge
],
autofocus: true,
avoidIosKeyboard: true,
initialContent,
});