diff --git a/packages/browser-extension/src/components/EntityEditor.tsx b/packages/browser-extension/src/components/EntityEditor.tsx
index cdb31c9..a0f7fcc 100644
--- a/packages/browser-extension/src/components/EntityEditor.tsx
+++ b/packages/browser-extension/src/components/EntityEditor.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { useSelector, useDispatch } from "react-redux";
-import { TextInput, Text } from "react-native-paper";
-import { View } from "react-native";
+import { TextInput, Text, Surface } from "react-native-paper";
+import { View, StyleSheet } from "react-native";
import {
Polarity,
@@ -19,7 +19,7 @@ import {
import * as selectors from "../store/selectors";
const EntityEditor: React.FC = () => {
- const selectedEntities = useSelector(selectors.selectedEntities);
+ const selectedEntities = useSelector(selectors.selectedEntitiesForEdit);
if (selectedEntities.length < 1) {
return No entity selected;
}
@@ -101,8 +101,36 @@ function MediaExcerptEditor({ entity }: { entity: MediaExcerpt }) {
)
}
/>
+
+ Quotation
+ {entity.quotation}
+
);
}
+const styles = StyleSheet.create({
+ quotationContainer: {
+ marginTop: 16,
+ marginBottom: 16,
+ padding: 16,
+ backgroundColor: "#f5f5f5",
+ borderRadius: 4,
+ borderLeftWidth: 4,
+ borderLeftColor: "#757575",
+ },
+ quotationLabel: {
+ fontSize: 12,
+ color: "#757575",
+ marginBottom: 8,
+ },
+ quotationText: {
+ fontSize: 16,
+ lineHeight: 24,
+ color: "#424242",
+ userSelect: "text",
+ fontStyle: "italic",
+ },
+});
+
export default EntityEditor;
diff --git a/packages/browser-extension/src/store/selectors.ts b/packages/browser-extension/src/store/selectors.ts
index 2783ca5..806b4ec 100644
--- a/packages/browser-extension/src/store/selectors.ts
+++ b/packages/browser-extension/src/store/selectors.ts
@@ -41,6 +41,11 @@ export const selectedEntities = createSelector(
(entities, selectedIds) => entities.filter((e) => selectedIds.includes(e.id)),
);
+export const selectedEntitiesForEdit = createSelector(
+ [selectedEntities],
+ (selectedEntities) => selectedEntities.filter((e) => e.type !== "Appearance"),
+);
+
const selectAllMaps = (state: RootState) => state.entities.maps;
export const allPropositions = createSelector([selectAllMaps], (allMaps) =>