10play/10tap-editor

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,
});