Skip to main content
Version: 1.x.x

RichTextRecord

quip.apps.RichTextRecord is a special type of Record that corresponds to a rich text box within the app. The developer can create and delete RichTextRecord objects and can render them within their app by using the React component: <quip.apps.ui.RichTextBox/>.

Special Properties​

{
    // Optional. Allows the creator to specify the default text that should appear
    // in the RichTextBox on creation.
    RichText_defaultText: "string",
    // Optional. Allows the creator to specify  placeholder text that should
    // appear in the RichTextBox whenever it is empty.
    RichText_placeholderText: "string",
}

Example​


interface DraggableCardData {
    uuid: string;
    color: string;
    record: quip.apps.RichTextRecord;
}

interface DraggableCardProperties extends quip.apps.RichTextRecordProperties {
    color: string;
}

class DraggableCard extends quip.apps.RichTextRecord {
    static getProperties = () => ({
        color: "string",
    })

    getData() {
        const color = this.get("color") as string
        return {
            uuid: this.id(),
            color,
            record: this
        }
    }
}

quip.apps.registerClass(DraggableCard, "draggable-card");

interface AppData {
    title: string;
    cards: DraggableCardData[]
}

class RootRecord extends quip.apps.RootRecord {
    static getProperties = () => ({
        title: quip.apps.RichTextRecord,
        cards: quip.apps.RecordList.Type(DraggableCard),
    })

    static getDefaultProperties = () => ({
        title: { RichText_placeholderText: "Add a title" },
        cards: [],
    })

    cards = () => this.get("cards") as quip.apps.RecordList<DraggableCard>;

    public addCard(props: DraggableCardProperties) {
        this.cards().add(props);
    }

    public getData(): AppData {
        const title = record.get("title");
        const cards = this.cards().getRecords().map(card => card.getData()) as DraggableCardData[]
        return {
            title,
            cards
        }
    }
}

quip.apps.registerClass(RootRecord, "root");

class Root extends React.Component {
    render() {
        const record = quip.apps.getRootRecord();
        const {title, cards} = record.getData();
        return (
            <div>
                <quip.apps.ui.RichTextBox record={title} />
                {cards.map((card) => (
                    <quip.apps.ui.RichTextBox
                        key={card.uuid}
                        record={card.record}
                        color={card.color}
                    />
                ))}
            </div>
        );
    }
}

quip.apps.initialize({
    initializationCallback: (root, params) => {
        const rootRecord = quip.apps.getRootRecord();
        if (params.isCreation) {
            rootRecord.addCard({
                color: "BLUE",
                RichText_defaultText: "Blue card!"
            });
            rootRecord.addCard({
                color: "RED",
                RichText_defaultText: "Red card!"
            });
        }
        ReactDOM.render(<Root />, root);
    },
});