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
- Typescript
- Javascript
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);
},
});
class DraggableCard extends quip.apps.RichTextRecord {
static getProperties = () => ({
color: "string",
})
}
quip.apps.registerClass(DraggableCard, "draggable-card");
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: [],
})
}
quip.apps.registerClass(RootRecord, "root");
class Root extends React.Component {
render() {
const record = quip.apps.getRootRecord();
const title = record.get("title");
const cards = record.get("cards").getRecords();
return (
<div>
<quip.apps.ui.RichTextBox record={title} />
{cards.map((card) => (
<quip.apps.ui.RichTextBox
key={card.getId()}
record={card}
color={card.get("color")}
/>
))}
</div>
);
}
}
quip.apps.initialize({
initializationCallback: (root, params) => {
const rootRecord = quip.apps.getRootRecord();
const cardList = rootRecord.get("cards");
if (params.isCreation) {
cardList.add({
color: "BLUE",
RichText_defaultText: "Blue card!"
});
cardList.add({
color: "RED",
RichText_defaultText: "Red card!"
});
}
ReactDOM.render(<Root />, root);
},
});