Skip to main content
Version: 1.x.x

Comments

quip.apps.Record.prototype​

supportsComments​

Function() => boolean

Override this to return whether this Record supports commenting. By default, this returns false.

note

This has no effect when overridden in the RootRecord. In order to control whether commenting is available on the app as a whole, please see the disable_app_level_comments field in the app manifest.

getDom​

Function() => HTMLElement

Override this method to return the DOM node that represents this Record. This is required if this Record supports comments, as this DOM node will be used to highlight the Record when showing the corresponding comments.

showComments​

Function(id: string) => void

Sends a message to the host to show the comments UI for the given Record ID.

getCommentCount​

Function() => number

Returns the number of comments on this record

listenToComments​

Function(listener: (record: quip.apps.Record) => void) => void

Subscribe to changes in the comments associated with this Record ID.

unlistenToComments​

Function(listener: (record: quip.apps.Record) => void) => void

Unsubscribe from changes to the comments associated with this Record.

Example​


class RootRecord extends quip.apps.RootRecord {
    static getProperties = () => ({
        commentableRecord: CommentableRecord,
    })

    static getDefaultProperties = () => ({
        commentableRecord: {},
    })

    getCommentableRecord = () => this.get("commentableRecord") as CommentableRecord
}

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

class CommentableRecord extends quip.apps.Record {
    static getProperties = () => ({})

    private node: HTMLElement

    getDom() {
        return this.node;
    }

    setDom(node: HTMLElement) {
        this.node = node;
    }

    supportsComments() {
        return true;
    }
}

quip.apps.registerClass(CommentableRecord, "commentable-record");

interface RootProps {
    rootRecord: RootRecord
}

class Root extends React.Component<RootProps> {
    render() {
        const {rootRecord} = this.props;
        const commentableRecord = rootRecord.getCommentableRecord();
        return (
            <div ref={(c) => commentableRecord.setDom(c)}>
                Comment
                <quip.apps.ui.CommentsTrigger
                    record={commentableRecord}
                    showEmpty={true}
                />
            </div>
        );
    }
}

quip.apps.initialize({
    initializationCallback: (root, params) => {
        const rootRecord = quip.apps.getRootRecord() as RootRecord;
        ReactDOM.render(<Root rootRecord={rootRecord}/>, root);
    },
});